/// <reference path="../Declarations/forguncy.d.ts" />
/// <reference path="../Declarations/forguncy.Plugin.d.ts" />

String.prototype.convertToRGB = function () {
    if (this.length != 6) {
        //throw "Only six-digit hex colors are allowed.";
    }
    var aRgbHex = this.match(/[a-f,A-F,0-9]{1,2}/g);
    var aRgb = parseInt(aRgbHex[0], 16) + "," + parseInt(aRgbHex[1], 16) + "," + parseInt(aRgbHex[2], 16);
    return aRgb;
}
class PlugGraphVisTreeCellType extends Forguncy.Plugin.CellTypeBase {

    GraphVis = null;
    GraphVis_Div_ID = null;
    GraphVis_Div_Width = null;
    GraphVis_Div_Height = null;
    GraphVis_Panel_ID = null; 画板ID
    GraphVis_LicenseKey = null;//授权Key
    GraphVis_textWatermark = null;//下载图片文字水印设置
    GraphVis_needWatermark = false;//是否需要水印
    GraphVis_backgroundColor = null;//画本背景色
    GraphVis_GlobalConfig = null;//全局样式配置
    GraphVis_SingleNodeConfig = null;//单个节点样式配置
    GraphVis_ToolBarShowConfig = {};//画布工具条配置
    graphvis_nodes = [];//节点
    graphvis_links = [];//连线
    graphvis_node_sigle_config = [];//每一个节点的样式配置
    graphvis_link_sigle_config = [];//每一个连线的样式配置
    graphvis_layout = null;//布局选择
    graphvis_layoutConfig = null;//布局配置参数
    SourceDataFrom = null;//数据源选择
    graphvis_node_right_click = null;// 节点右键命令
    graphvis_link_right_click = null;// 连线右键命令

    TreeRootFlag = null;//根节点的符号， 空 或者 0


    loadBindingData_tree() {
        console.log("loadBindingData_tree()");
        const enable_fromdb = true;
        var task_list = [];
        this.graphvis_nodes = [];
        this.graphvis_links = [];
        let data_tree = null;
        let that = this;
        //从数据库读取节点 边信息
        if (enable_fromdb == true) {
            const datasource_node = this.CellElement.CellType.SourceDataFromDB_Tree;
            console.log("datasource_node", datasource_node);
            var arr_node = new Array();
            if (datasource_node) {
                task_list[0] = new Promise((resolve, reject) => {
                    this.getBindingDataSourceValue(datasource_node, null, data => {

                        for (const row of data) {
                            console.log("node row", row)
                            var obj_node = { "id": row.nodeid, "label": row.label,"linklabel":row.linklabel, "type": row.type, "tags": row.tags, "nodeParentID": row.nodeParentID };
                            obj_node.label = obj_node.label?.replace("\\n", "\n");//内置库的换行符 替换
                            if (row.tags) {
                                obj_node["tags"] = row.tags.split(',')
                            }
                            if (row.tagColor) {
                                obj_node["tagColor"] = ChineseColorName2RGB[row.tagColor];
                            }
                            const propert = ["nodeid", "label", "type", "warnText", "nodeParentID"];//固有属性
                            obj_node.properties = {};
                            obj_node.properties.label = obj_node.label;
                            for (let key of Object.keys(row)) {
                                if (propert.indexOf(key) === -1)//属性值不属于固定属性
                                {
                                    let keyvalue = row[key];
                                    obj_node.properties[key] = keyvalue ?? "";
                                }
                            }
                            that.graphvis_nodes.push(obj_node);
                            //如果不是根节点
                            if (obj_node.nodeParentID == that.TreeRootFlag) {

                            } else {
                                that.graphvis_links.push(
                                    {
                                        "source": obj_node.nodeParentID,
                                        "target": obj_node.id ,
                                        "label": obj_node.linklabel
                                    });
                            }
                        }
                        //data_tree = smartArrayToTree(arr_node, { id: 'id', pid: 'nodeParentID', firstPid: this.TreeRootFlag, children: 'children' });
                        //console.log("data_tree", data_tree);
                        this.get_nodeinfo_complete = true;//完成节点的表数据读取
                        resolve(true);
                    }
                    );
                });
            }
            console.log("this.get_nodeinfo_complete ", this.get_nodeinfo_complete);
            console.log("task_list", task_list);
            Promise.all(task_list)
                .then((res) => {
                    console.log("2个任务完成");

                    console.log("this.get_nodeinfo_complete ", this.get_nodeinfo_complete);
                    if (that.graphvis_nodes) {
                        //this.updateGraphData_tree(data_tree[0]);//更新图
                        this.updateGraphData_tree({ "nodes": that.graphvis_nodes, "links": that.graphvis_links });
                        try {
                            this.loadSingleNodeLinkConifg();
                        } catch (ex) {
                            console.log("loadSingleNodeLinkConifg", ex);
                        }
                    }
                })
                .catch((err) => {
                    console.log(err) // reject1
                })
        }

    }

    loadSingleNodeLinkConifg() {
        var task_list = [];
        let count = -1;
        let GraphVis_SingleNodeConfig = this.CellElement.CellType.SingleNodeStyleConfig;//单个节点样式配置
        if (GraphVis_SingleNodeConfig) {
            for (const config_item of GraphVis_SingleNodeConfig) {
                count = count + 1;
                const filter_node = config_item.FilterFromDB_Node;
                const nodestyle_config = {};//config_item.NodeStyleConfig;
                if (config_item.NodeStyleConfig.hasOwnProperty("x")) nodestyle_config["x"] = config_item.NodeStyleConfig["x"];
                if (config_item.NodeStyleConfig.hasOwnProperty("y")) nodestyle_config["y"] = config_item.NodeStyleConfig["y"];
                if (config_item.NodeStyleConfig.hasOwnProperty("shape")) nodestyle_config["shape"] = config_item.NodeStyleConfig["shape"];
                if (config_item.NodeStyleConfig.hasOwnProperty("size")) nodestyle_config["size"] = config_item.NodeStyleConfig["size"];
                nodestyle_config["visible"] = config_item.NodeStyleConfig?.visible ?? false;
                nodestyle_config["showlabel"] = config_item.NodeStyleConfig?.showlabel ?? false;
                if (config_item.NodeStyleConfig.hasOwnProperty("fillColor")) nodestyle_config["fillColor"] = config_item.NodeStyleConfig["fillColor"].convertToRGB();
                if (config_item.NodeStyleConfig.hasOwnProperty("borderWidth")) nodestyle_config["borderWidth"] = config_item.NodeStyleConfig["borderWidth"];
                if (config_item.NodeStyleConfig.hasOwnProperty("borderColor")) nodestyle_config["borderColor"] = config_item.NodeStyleConfig["borderColor"].convertToRGB();
                if (config_item.NodeStyleConfig.hasOwnProperty("selectedBorderWidth")) nodestyle_config["selectedBorderWidth"] = config_item.NodeStyleConfig["selectedBorderWidth"];
                if (config_item.NodeStyleConfig.hasOwnProperty("selectedBorderColor")) nodestyle_config["selectedBorderColor"] = config_item.NodeStyleConfig["selectedBorderColor"].convertToRGB();
                nodestyle_config["showShadow"] = config_item.NodeStyleConfig?.showShadow ?? false;
                if (config_item.NodeStyleConfig.hasOwnProperty("shadowBlur")) nodestyle_config["shadowBlur"] = config_item.NodeStyleConfig["shadowBlur"];
                if (config_item.NodeStyleConfig.hasOwnProperty("shadowColor")) nodestyle_config["shadowColor"] = config_item.NodeStyleConfig["shadowColor"].convertToRGB();
                if (config_item.NodeStyleConfig.hasOwnProperty("font")) {
                    //nodestyle_config["font"] = config_item.NodeStyleConfig["font"];
                    if (config_item.NodeStyleConfig.font.font_family) {
                        nodestyle_config["font"] = config_item.NodeStyleConfig.font.font_style + " " + config_item.NodeStyleConfig.font.font_size + "px " + config_item.NodeStyleConfig.font.font_family
                    }
                }
                if (config_item.NodeStyleConfig.hasOwnProperty("fontColor")) nodestyle_config["fontColor"] = config_item.NodeStyleConfig["fontColor"].convertToRGB();
                if (config_item.NodeStyleConfig.hasOwnProperty("textPosition")) nodestyle_config["textPosition"] = config_item.NodeStyleConfig["textPosition"];
                if (config_item.NodeStyleConfig.hasOwnProperty("image")) nodestyle_config["image"] = config_item.NodeStyleConfig["image"];
                if (config_item.NodeStyleConfig.hasOwnProperty("tagColor")) nodestyle_config["tagColor"] = config_item.NodeStyleConfig["tagColor"].convertToRGB();
                if (config_item.NodeStyleConfig.hasOwnProperty("tags")) nodestyle_config["tags"] = config_item.NodeStyleConfig["tags"];
                console.log("filter_node", filter_node);
                console.log("nodestyle_config", nodestyle_config);
                task_list[count] = new Promise((resolve, reject) => {
                    this.getBindingDataSourceValue(filter_node, null, data => {
                        for (const row of data) {
                            console.log("node row", row)
                            var obj_node = { "id": row.nodeid, "nodestyle": nodestyle_config };
                            this.graphvis_node_sigle_config.push(obj_node);
                        }
                        resolve(true);
                    });

                });
            }
        }
        let GraphVis_SingleLinkConfig = this.CellElement.CellType.SingleLinkStyleConfig;//单个连线样式配置
        if (GraphVis_SingleLinkConfig) {
            for (const config_item of GraphVis_SingleLinkConfig) {
                count = count + 1;
                const filter_link = config_item.FilterFromDB_Link;
                const linkstyle_config = {};
                if (config_item.LinkStyleConfig.hasOwnProperty("lineType")) linkstyle_config["lineType"] = config_item.LinkStyleConfig["lineType"];
                if (config_item.LinkStyleConfig.hasOwnProperty("lineWidth")) linkstyle_config["lineWidth"] = config_item.LinkStyleConfig["lineWidth"];
                linkstyle_config["visible"] = config_item.LinkStyleConfig?.visible ?? false;
                linkstyle_config["showlabel"] = config_item.LinkStyleConfig?.showlabel ?? false;
                linkstyle_config["showArrow"] = config_item.LinkStyleConfig?.showArrow ?? false;
                if (config_item.LinkStyleConfig.hasOwnProperty("arrowType")) linkstyle_config["arrowType"] = config_item.LinkStyleConfig["arrowType"];

                if (config_item.LinkStyleConfig.hasOwnProperty("strokeColor")) linkstyle_config["strokeColor"] = config_item.LinkStyleConfig["strokeColor"].convertToRGB();

                if (config_item.LinkStyleConfig.hasOwnProperty("labelBackGround")) linkstyle_config["labelBackGround"] = config_item.LinkStyleConfig["labelBackGround"].convertToRGB();
                if (config_item.LinkStyleConfig.hasOwnProperty("selectedColor")) linkstyle_config["selectedColor"] = config_item.LinkStyleConfig["selectedColor"].convertToRGB();
                if (config_item.LinkStyleConfig.hasOwnProperty("background")) linkstyle_config["background"] = config_item.LinkStyleConfig["background"].convertToRGB();
                if (config_item.LinkStyleConfig.hasOwnProperty("fontColor")) linkstyle_config["fontColor"] = config_item.LinkStyleConfig["fontColor"].convertToRGB();
                if (config_item.LinkStyleConfig.hasOwnProperty("lineDash")) linkstyle_config["lineDash"] = config_item.LinkStyleConfig["lineDash"].split(",");


                if (config_item.LinkStyleConfig.hasOwnProperty("font")) {
                    //linkstyle_config["font"] = config_item.LinkStyleConfig["font"];
                    if (config_item.LinkStyleConfig.font.font_family) {
                        linkstyle_config["font"] = config_item.LinkStyleConfig.font.font_style + " " + config_item.LinkStyleConfig.font.font_size + "px " + config_item.LinkStyleConfig.font.font_family
                    }
                }

                console.log("filter_link", filter_link);
                console.log("linkstyle_config", linkstyle_config);
                task_list[count] = new Promise((resolve, reject) => {
                    this.getBindingDataSourceValue(filter_link, null, data => {
                        for (const row of data) {
                            //console.log("node row", row)
                            var obj_link = { "id": row.linkid, "linkstyle": linkstyle_config };
                            this.graphvis_link_sigle_config.push(obj_link);
                        }
                        resolve(true);
                    });

                });
            }
        }

        Promise.all(task_list)
            .then((res) => {
                console.log(task_list.length + "个任务完成");
                console.log("this.graphvis_node_sigle_config", this.graphvis_node_sigle_config);
                console.log("this.graphvis_link_sigle_config", this.graphvis_link_sigle_config);

                this.updateGraphData_nodestyle(this.graphvis_node_sigle_config);
                this.updateGraphData_linkstyle(this.graphvis_link_sigle_config);
            })
            .catch((err) => {
                console.log(err) // reject1
            });



    }

    GetFormulaStringValue(key) {
        let result = this.evaluateFormula(this.CellElement.CellType[key])
        return result ? result : "_";
    }
    GeCellTypeBoolValue(key) {
        let result = this.CellElement.CellType[key];
        return result ? result : false;
    }
    createContent() {

        const guid = "9b663837-e2f8-4d57-a771-6334c0913718";
        const pluginrootpath = Forguncy.Helper.SpecialPath.getPluginRootPath(guid);
        const uid = "GraphVis-" + new Date().valueOf();
        this.GraphVis_Div_ID = "GraphVis_" + new Date().valueOf();//this.CellElement.CellType.ContainerID;//容器ID
        this.GraphVis_Panel_ID = "GraphVis_Panel" + new Date().valueOf();
        this.GraphVis_GlobalConfig = this.CellElement.CellType.GraphVisGlobalConfig;//全局样式配置
        this.GraphVis_backgroundColor = this.CellElement.CellType.backgroundColor;//画布背景色
        this.GraphVis_textWatermark = this.CellElement.CellType.textWatermark;
        this.GraphVis_needWatermark = this.CellElement.CellType.GraphVis_needWatermark ?? false;//是否需要水印
        this.SourceDataFrom = this.CellElement.CellType.SourceDataFrom;//数据源选择
        this.graphvis_node_right_click = this.CellElement.CellType.NodeRightClickCommand;
        this.graphvis_link_right_click = this.CellElement.CellType.LinkRightClickCommand;
        //工具条
        if (this.CellElement.CellType.toolBarShowConfig) {
            this.GraphVis_ToolBarShowConfig.toolbar_top = this.CellElement.CellType.toolBarShowConfig.toolbar_top ?? false;
            this.GraphVis_ToolBarShowConfig.toolbar_search = this.CellElement.CellType.toolBarShowConfig.toolbar_search ?? false;
            this.GraphVis_ToolBarShowConfig.toolbar_right = this.CellElement.CellType.toolBarShowConfig.toolbar_right ?? false;
            this.GraphVis_ToolBarShowConfig.toolbar_bottom = this.CellElement.CellType.toolBarShowConfig.toolbar_bottom ?? false;
            this.GraphVis_ToolBarShowConfig.toolbar_bottom_left = this.CellElement.CellType.toolBarShowConfig.toolbar_bottom_left ?? false;
            this.GraphVis_ToolBarShowConfig.toolbar_bottom_right = this.CellElement.CellType.toolBarShowConfig.toolbar_bottom_right ?? false;
        } else {
            this.GraphVis_ToolBarShowConfig.toolbar_top = true;
            this.GraphVis_ToolBarShowConfig.toolbar_search = true;
            this.GraphVis_ToolBarShowConfig.toolbar_right = true;
            this.GraphVis_ToolBarShowConfig.toolbar_bottom = true;
            this.GraphVis_ToolBarShowConfig.toolbar_bottom_left = true;
            this.GraphVis_ToolBarShowConfig.toolbar_bottom_right = true;
        }
        //背景色
        if (this.GraphVis_backgroundColor) {
            this.GraphVis_backgroundColor = Forguncy.ConvertToCssColor(this.GraphVis_backgroundColor);//.convertToRGB();
        } else {
            this.GraphVis_backgroundColor = '#fff';
        }
        //水印
        if (this.GraphVis_textWatermark) {
            if (this.GraphVis_textWatermark.hasOwnProperty("fontColor"))
                this.GraphVis_textWatermark["fontColor"] = Forguncy.ConvertToCssColor(this.GraphVis_textWatermark["fontColor"]);
        }
        //全局样式配置 适配
        if (this.GraphVis_GlobalConfig) {
            if (this.GraphVis_GlobalConfig.node) {//节点
                if (this.GraphVis_GlobalConfig.node.color) {//节点颜色
                    this.GraphVis_GlobalConfig.node.color = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.node.color).convertToRGB();
                }
                if (this.GraphVis_GlobalConfig.node.borderColor) {//边框颜色
                    this.GraphVis_GlobalConfig.node.borderColor = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.node.borderColor).convertToRGB();
                }
                if (this.GraphVis_GlobalConfig.node.tagColor) {//标记的颜色
                    this.GraphVis_GlobalConfig.node.tagColor = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.node.tagColor).convertToRGB();
                }
                if (this.GraphVis_GlobalConfig.node.label) { //标签配置
                    if (this.GraphVis_GlobalConfig.node.label.color) {//字体颜色
                        this.GraphVis_GlobalConfig.node.label.color = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.node.label.color).convertToRGB();
                    }
                    if (this.GraphVis_GlobalConfig.node.label.font) {//字体
                        if (this.GraphVis_GlobalConfig.node.label.font.font_family) {
                            this.GraphVis_GlobalConfig.node.label.font = this.GraphVis_GlobalConfig.node.label.font.font_style + " " + this.GraphVis_GlobalConfig.node.label.font.font_size + "px " + this.GraphVis_GlobalConfig.node.label.font.font_family
                        }
                    }
                    this.GraphVis_GlobalConfig.node.label.show = this.GraphVis_GlobalConfig.node.label.show ?? false;
                }
                if (this.GraphVis_GlobalConfig.node.selected) {
                    if (this.GraphVis_GlobalConfig.node.selected.borderColor) {//选中时边框颜色
                        this.GraphVis_GlobalConfig.node.selected.borderColor = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.node.selected.borderColor).convertToRGB();
                    }
                    if (this.GraphVis_GlobalConfig.node.selected.shadowColor) {//选中是的阴影颜色
                        this.GraphVis_GlobalConfig.node.selected.shadowColor = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.node.selected.shadowColor).convertToRGB();
                    }
                }
            }

            if (this.GraphVis_GlobalConfig.link) {//连线
                if (this.GraphVis_GlobalConfig.link.label) { //连线标签
                    if (this.GraphVis_GlobalConfig.link.label.color) {//字体颜色
                        this.GraphVis_GlobalConfig.link.label.color = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.link.label.color).convertToRGB();
                    }
                    if (this.GraphVis_GlobalConfig.link.label.font) {//字体
                        if (this.GraphVis_GlobalConfig.link.label.font.font_family) {
                            this.GraphVis_GlobalConfig.link.label.font = this.GraphVis_GlobalConfig.link.label.font.font_style + " " + this.GraphVis_GlobalConfig.link.label.font.font_size + "px " + this.GraphVis_GlobalConfig.link.label.font.font_family
                        }
                    }
                    this.GraphVis_GlobalConfig.link.label.show = this.GraphVis_GlobalConfig.link.label.show ?? false;
                }
                if (this.GraphVis_GlobalConfig.link.color) {//连线颜色
                    this.GraphVis_GlobalConfig.link.color = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.link.color).convertToRGB();
                }
                if (this.GraphVis_GlobalConfig.link.selected) {
                    if (this.GraphVis_GlobalConfig.link.selected.color) {//选中时边框颜色
                        this.GraphVis_GlobalConfig.link.selected.color = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.link.selected.color).convertToRGB();
                    }
                }
                this.GraphVis_GlobalConfig.link.showArrow = this.GraphVis_GlobalConfig.link.showArrow ?? false;//连线箭头
            }

            if (this.GraphVis_GlobalConfig.selectBox) {//框选区域的颜色配置
                if (this.GraphVis_GlobalConfig.selectBox.color) {//选中时边框颜色
                    this.GraphVis_GlobalConfig.selectBox.color = Forguncy.ConvertToCssColor(this.GraphVis_GlobalConfig.selectBox.color).convertToRGB();
                }
            }

        }

        //默认布局
        const cellType = this.CellElement.CellType;
        this.graphvis_layout = cellType.layout ?? "tree";
        this.TreeRootFlag = cellType.TreeRootFlag ?? null;//根节点标识
        if (this.graphvis_layout == "fastForce") {
            this.graphvis_layoutConfig = cellType.layout_fastForce
        } else if (this.graphvis_layout == "simulation") {
            this.graphvis_layoutConfig = cellType.layout_simulation
        } else if (this.graphvis_layout == "kawakai") {
            this.graphvis_layoutConfig = cellType.layout_kawakai
        } else if (this.graphvis_layout == "hierarchical") {
            this.graphvis_layoutConfig = cellType.layout_hierarchical
        } else if (this.graphvis_layout == "concentric") {
            this.graphvis_layoutConfig = cellType.layout_concentric
        } else if (this.graphvis_layout == "circle") {
            this.graphvis_layoutConfig = cellType.layout_circle
        } else if (this.graphvis_layout == "arf") {
            this.graphvis_layoutConfig = cellType.layout_arf
        } else if (this.graphvis_layout == "tree") {
            this.graphvis_layoutConfig = cellType.layout_tree
        } else if (this.graphvis_layout == "grid") {
            this.graphvis_layoutConfig = cellType.layout_grid
        } else if (this.graphvis_layout == "dagre") {
            this.graphvis_layoutConfig = cellType.layout_dagre
        } else if (this.graphvis_layout == "radial") {
            this.graphvis_layoutConfig = cellType.layout_radial
        } else if (this.graphvis_layout == "avoidlap") {
            this.graphvis_layoutConfig = cellType.layout_avoidlap
        }


        //数据
        if (this.SourceDataFrom == "database") {
            //this.loadBindingData();//读取数据
        } if (this.SourceDataFrom == "database_tree") {
            this.loadBindingData_tree();//读取树形表数据
        } else if (this.SourceDataFrom == "config") {
            var nodelist = this.CellElement.CellType.SourceDataFromConfig_NodeList;
            if (nodelist) {
                nodelist.forEach(item => {
                    item.pid = item.pid ?? null;//pid没有值填写"";
                    item.name = item.name || item.label;
                    let _style = item.style;
                    if (_style) {
                        if (_style.fillColor) _style.fillColor = Forguncy.ConvertToCssColor(_style.fillColor).convertToRGB();
                        if (_style.borderColor) _style.borderColor = Forguncy.ConvertToCssColor(_style.borderColor).convertToRGB();
                        if (_style.selectedBorderColor) _style.selectedBorderColor = Forguncy.ConvertToCssColor(_style.selectedBorderColor).convertToRGB();
                        if (_style.shadowColor) _style.shadowColor = Forguncy.ConvertToCssColor(_style.shadowColor).convertToRGB();
                        if (_style.fontColor) _style.fontColor = Forguncy.ConvertToCssColor(_style.fontColor).convertToRGB();
                        if (_style.tagColor) _style.tagColor = Forguncy.ConvertToCssColor(_style.tagColor).convertToRGB();
                        if (_style.tags) _style.tags = _style.tags.split(',');
                    }
                })
            }
            console.log("nodelist", nodelist);
            const treenode_list = smartArrayToTree(nodelist, { id: 'id', pid: 'pid', firstPid: this.TreeRootFlag, children: 'children' });
            //
            var linklist = this.CellElement.CellType.SourceDataFromConfig_LinkList;
            if (linklist) {
                linklist.forEach(item => {
                    let _style = item.style;
                    if (_style) {
                        if (_style.strokeColor) _style.strokeColor = Forguncy.ConvertToCssColor(_style.strokeColor).convertToRGB();
                        if (_style.labelBackGround) _style.labelBackGround = Forguncy.ConvertToCssColor(_style.labelBackGround).convertToRGB();
                        if (_style.selectedColor) _style.selectedColor = Forguncy.ConvertToCssColor(_style.selectedColor).convertToRGB();
                        if (_style.background) _style.background = Forguncy.ConvertToCssColor(_style.background).convertToRGB();
                        if (_style.fontColor) _style.fontColor = Forguncy.ConvertToCssColor(_style.fontColor).convertToRGB();

                        if (_style.lineDash) _style.lineDash = _style.lineDash.split(',');
                    }
                })
            }
            console.log("linklist", linklist);
            //
            if (treenode_list.length == 0) {
                window.alert("数据源记录为空");
            } else if (treenode_list.length == 1) {
                this.graphvis_nodes = treenode_list[0];//取第一条
            } else {
                window.alert("树形记录存在多个根节点，只显示第一个根节点。");
                this.graphvis_nodes = treenode_list[0];//取第一条
            }
            this.graphvis_links = linklist;
        }
        //设计时元素的高度。
        let content_height = this.CellElement.Height;
        let content_width = this.CellElement.Width
        console.log("content_height", content_height);
        console.log("content_width", content_width);
        //由于数据源查询条件可能会依赖单元格上的数据，如果单元格上的数据发生变化，需要重新获取数据源。
        //为了处理这种情况，需要监听 onDependenceCellValueChanged 回调函数。
        this.onDependenceCellValueChanged(() => {
            if (this.SourceDataFrom == "database") {
                //this.loadBindingData();//读取数据
            } if (this.SourceDataFrom == "database_tree") {
                this.loadBindingData_tree();//读取树形表数据
            }
        });
        this.content = $(`<div id ="${this.GraphVis_Div_ID}"  style='width:${content_width}px; height:${content_height}px ; background-color: ${this.GraphVis_backgroundColor} '></div>`);
        return this.content;
    }


    onPageLoaded() {
        //const uid = "graph-container";//"uid-" + new Date().valueOf();
        const self = this;
        const LicenseKey = this.CellElement.CellType.LicenseKey;
        this.GraphVis_LicenseKey = this.evaluateFormula(LicenseKey) ?? "-";//授权Key
        //
        const guid = "9b663837-e2f8-4d57-a771-6334c0913718";
        const pluginrootpath = Forguncy.Helper.SpecialPath.getPluginRootPath(guid);
        const img_url_people = pluginrootpath + "Resources/assets/images/242.png";
        const img_url_company = pluginrootpath + "Resources/assets/images/company2.png";

        const option = {
            template:
                ` 

    <div style="height: 100%;">

    <!--图显示区域-->
    <div class="graph-area" style="height: 100%;" > 
      <!-- @contextmenu.prevent="showRightMenu" -->

      <!-- 绘图面板区域 -->
      <div id="${this.GraphVis_Panel_ID}" style="width: 100%;height: calc(100% - 40px);"></div>

      <div class="graph-bottom"  v-if="show_toolbar_bottom">
        <div class="bottom-group right" v-if="show_toolbar_bottom_right">
          <div class="group-item" @click="toolBarEvent('scale', 'zoomOut')" title="增加间距">  <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"></path></svg>  </el-icon>    </div>
          <div class="group-item" @click="toolBarEvent('scale', 'zoomIn')" title="缩小间距">   <el-icon>  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"></path></svg>  </el-icon>  </div>
          <div class="group-item" @click="toolBarEvent('rotate', 'right')" title="顺时针旋转"> <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"></path></svg>  </el-icon>  </div>
          <div class="group-item" @click="toolBarEvent('rotate', 'left')" title="逆时针旋转">   <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M289.088 296.704h92.992a32 32 0 0 1 0 64H232.96a32 32 0 0 1-32-32V179.712a32 32 0 0 1 64 0v50.56a384 384 0 0 1 643.84 282.88 384 384 0 0 1-383.936 384 384 384 0 0 1-384-384h64a320 320 0 1 0 640 0 320 320 0 0 0-555.712-216.448z"></path></svg>  </el-icon></div>
        </div>

        <div class="bottom-group"  v-if="show_toolbar_bottom_left">
          <el-dropdown @command="dataOperate" style="vertical-align:middle">
            <span class="el-dropdown-link">
               <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M878.08 448H241.92l-96 384h636.16l96-384zM832 384v-64H485.76L357.504 192H128v448l57.92-231.744A32 32 0 0 1 216.96 384H832zm-24.96 512H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h287.872l128.384 128H864a32 32 0 0 1 32 32v96h23.04a32 32 0 0 1 31.04 39.744l-112 448A32 32 0 0 1 807.04 896z"></path></svg> </el-icon> 分析历史  <el-icon class="el-icon--right"> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"></path></svg> </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu  >
                  <el-dropdown-item icon="el-icon-folder-add" :command="'saveHistory'">保存分析结果</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-notebook-2" :command="'showHistory'">浏览分析历史</el-dropdown-item>
                </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <div class="bottom-group" v-if="show_toolbar_bottom_left" >
          <el-dropdown @command="nodeOperate" style="vertical-align:middle">
            <span class="el-dropdown-link">
               <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"></path><path fill="currentColor" d="M512 96a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V128a32 32 0 0 1 32-32zm0 576a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V704a32 32 0 0 1 32-32zM96 512a32 32 0 0 1 32-32h192a32 32 0 0 1 0 64H128a32 32 0 0 1-32-32zm576 0a32 32 0 0 1 32-32h192a32 32 0 1 1 0 64H704a32 32 0 0 1-32-32z"></path></svg> </el-icon> 实体  <el-icon class="el-icon--right"> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"></path></svg> </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu >
                  <el-dropdown-item icon="el-icon-circle-check" :command="'selectAll'">全选</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-finished" :command="'reverseSelectNodes'">反选</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-document-checked" :command="'onlyShowSelectedNode'">只显示选中</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-document-delete" :command="'hideSelectedNode'">隐藏选中</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-data-line" :command="'showAllNode'">全部显示</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-news" :command="'hideIsolatedNodes'">隐藏孤立点</el-dropdown-item>
                </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <div class="bottom-group" v-if="show_toolbar_bottom_left">
          <el-dropdown @command="linkOperate" style="vertical-align:middle" >
            <span class="el-dropdown-link">
               <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M640 384v64H448a128 128 0 0 0-128 128v128a128 128 0 0 0 128 128h320a128 128 0 0 0 128-128V576a128 128 0 0 0-64-110.848V394.88c74.56 26.368 128 97.472 128 181.056v128a192 192 0 0 1-192 192H448a192 192 0 0 1-192-192V576a192 192 0 0 1 192-192h192z"></path><path fill="currentColor" d="M384 640v-64h192a128 128 0 0 0 128-128V320a128 128 0 0 0-128-128H256a128 128 0 0 0-128 128v128a128 128 0 0 0 64 110.848v70.272A192.064 192.064 0 0 1 64 448V320a192 192 0 0 1 192-192h320a192 192 0 0 1 192 192v128a192 192 0 0 1-192 192H384z"></path></svg>  </el-icon> 关系  <el-icon class="el-icon--right"> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"></path></svg> </el-icon>
            </span>
             <template #dropdown>
                <el-dropdown-menu  >
                  <el-dropdown-item icon="el-icon-document-checked" :command="'onlyShowSelectLink'">仅显示选中</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-data-line" :command="'showAllLink'">全部显示</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-news" :command="'hideAllLink'">全部隐藏</el-dropdown-item>
                </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <div class="bottom-group" v-if="show_toolbar_bottom_left">
          <el-dropdown @command="fileOperate" style="vertical-align:middle">
            <span class="el-dropdown-link">
           <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M704 288h131.072a32 32 0 0 1 31.808 28.8L886.4 512h-64.384l-16-160H704v96a32 32 0 1 1-64 0v-96H384v96a32 32 0 0 1-64 0v-96H217.92l-51.2 512H512v64H131.328a32 32 0 0 1-31.808-35.2l57.6-576a32 32 0 0 1 31.808-28.8H320v-22.336C320 154.688 405.504 64 512 64s192 90.688 192 201.664v22.4zm-64 0v-22.336C640 189.248 582.272 128 512 128c-70.272 0-128 61.248-128 137.664v22.4h256zm201.408 476.16a32 32 0 1 1 45.248 45.184l-128 128a32 32 0 0 1-45.248 0l-128-128a32 32 0 1 1 45.248-45.248L704 837.504V608a32 32 0 1 1 64 0v229.504l73.408-73.408z"></path></svg></el-icon>下载 <el-icon class="el-icon--right"> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m488.832 344.32-339.84 356.672a32 32 0 0 0 0 44.16l.384.384a29.44 29.44 0 0 0 42.688 0l320-335.872 319.872 335.872a29.44 29.44 0 0 0 42.688 0l.384-.384a32 32 0 0 0 0-44.16L535.168 344.32a32 32 0 0 0-46.336 0z"></path></svg> </el-icon>
            </span>
          <template #dropdown>
            <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-picture-outline" :command="'saveImage'">图谱图片</el-dropdown-item>
            <el-dropdown-item icon="el-icon-sold-out" :command="'saveFile'">数据文件</el-dropdown-item>
            </el-dropdown-menu>
          </template>
         </el-dropdown>


        </div>

      </div>
    </div>

    <!-- 搜索框 -->
    <div class="search-box" v-if="show_toolbar_search" >
      <el-autocomplete
        popper-class="my-autocomplete"
        clearable
        size="small"
        v-model="searchText"
        :fetch-suggestions="querySearchNode"
        :loading="loading"
        placeholder="请输入关键词搜索节点"
        @select="handleSelect">

        <template #default="{ item }">
          <div class="label"> {{ item.label }}</div>
        </template>
      </el-autocomplete>
    </div>

    <!-- 顶部工具栏 -->
    <div class="top-toolbar" v-if="show_toolbar_top" >
      <div class="toolbar-ele" @click="toolBarEvent('zoom', 'zoomOut')" title="放大"> <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"></path></svg>  </el-icon> </div>
      <div class="toolbar-ele" @click="toolBarEvent('zoom', 'zoom1')" title="原始大小">  <el-icon><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M813.176 180.706a60.235 60.235 0 0 1 60.236 60.235v481.883a60.235 60.235 0 0 1-60.236 60.235H210.824a60.235 60.235 0 0 1-60.236-60.235V240.94a60.235 60.235 0 0 1 60.236-60.235h602.352zm0-60.235H210.824A120.47 120.47 0 0 0 90.353 240.94v481.883a120.47 120.47 0 0 0 120.47 120.47h602.353a120.47 120.47 0 0 0 120.471-120.47V240.94a120.47 120.47 0 0 0-120.47-120.47zm-120.47 180.705a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 0 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zm-361.412 0a30.118 30.118 0 0 0-30.118 30.118v301.177a30.118 30.118 0 1 0 60.236 0V331.294a30.118 30.118 0 0 0-30.118-30.118zM512 361.412a30.118 30.118 0 0 0-30.118 30.117v30.118a30.118 30.118 0 0 0 60.236 0V391.53A30.118 30.118 0 0 0 512 361.412zM512 512a30.118 30.118 0 0 0-30.118 30.118v30.117a30.118 30.118 0 0 0 60.236 0v-30.117A30.118 30.118 0 0 0 512 512z"></path></svg>  </el-icon> </div>
      <div class="toolbar-ele" @click="toolBarEvent('zoom', 'zoomIn')" title="缩小"> <el-icon>  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"></path></svg>  </el-icon> </div>
      <div class="toolbar-ele right-border" @click="toolBarEvent('zoom', 'auto')" title="窗口内显示"> <el-icon>  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m160 96.064 192 .192a32 32 0 0 1 0 64l-192-.192V352a32 32 0 0 1-64 0V96h64v.064zm0 831.872V928H96V672a32 32 0 1 1 64 0v191.936l192-.192a32 32 0 1 1 0 64l-192 .192zM864 96.064V96h64v256a32 32 0 1 1-64 0V160.064l-192 .192a32 32 0 1 1 0-64l192-.192zm0 831.872-192-.192a32 32 0 0 1 0-64l192 .192V672a32 32 0 1 1 64 0v256h-64v-.064z"></path></svg>  </el-icon> </div>

      <div :class="[curMouseMode=='rect'? 'toolbar-ele actived':'toolbar-ele'] " @click="toolBarEvent('select', 'rect')" title="框选"> <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M256 768h672a32 32 0 1 1 0 64H224a32 32 0 0 1-32-32V96a32 32 0 0 1 64 0v672z"></path><path fill="currentColor" d="M832 224v704a32 32 0 1 1-64 0V256H96a32 32 0 0 1 0-64h704a32 32 0 0 1 32 32z"></path></svg> </el-icon> </div>
      <div :class="[curMouseMode=='lasso'? 'toolbar-ele actived':'toolbar-ele'] " @click="toolBarEvent('select', 'lasso')" title="自由框选"><el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m174.72 855.68 130.048-43.392 23.424 11.392C382.4 849.984 444.352 864 512 864c223.744 0 384-159.872 384-352 0-192.832-159.104-352-384-352S128 319.168 128 512a341.12 341.12 0 0 0 69.248 204.288l21.632 28.8-44.16 110.528zm-45.248 82.56A32 32 0 0 1 89.6 896l56.512-141.248A405.12 405.12 0 0 1 64 512C64 299.904 235.648 96 512 96s448 203.904 448 416-173.44 416-448 416c-79.68 0-150.848-17.152-211.712-46.72l-170.88 56.96z"></path></svg> </el-icon></div>
      <div class="toolbar-ele" @click="toolBarEvent('select', 'normal')" title="常规模式"><el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M511.552 128c-35.584 0-64.384 28.8-64.384 64.448v516.48L274.048 570.88a94.272 94.272 0 0 0-112.896-3.456 44.416 44.416 0 0 0-8.96 62.208L332.8 870.4A64 64 0 0 0 384 896h512V575.232a64 64 0 0 0-45.632-61.312l-205.952-61.76A96 96 0 0 1 576 360.192V192.448C576 156.8 547.2 128 511.552 128zM359.04 556.8l24.128 19.2V192.448a128.448 128.448 0 1 1 256.832 0v167.744a32 32 0 0 0 22.784 30.656l206.016 61.76A128 128 0 0 1 960 575.232V896a64 64 0 0 1-64 64H384a128 128 0 0 1-102.4-51.2L101.056 668.032A108.416 108.416 0 0 1 128 512.512a158.272 158.272 0 0 1 185.984 8.32L359.04 556.8z"></path></svg></el-icon>  </div>
    </div>

    <!-- 右侧工具条 -->
    <div class="toolbar right"  v-if="show_toolbar_right">

      <div class="toolbar-item" @click="staticPanelshow = true"  title="图谱信息">
        <el-icon>   <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="m665.216 768 110.848 192h-73.856L591.36 768H433.024L322.176 960H248.32l110.848-192H160a32 32 0 0 1-32-32V192H64a32 32 0 0 1 0-64h896a32 32 0 1 1 0 64h-64v544a32 32 0 0 1-32 32H665.216zM832 192H192v512h640V192zM352 448a32 32 0 0 1 32 32v64a32 32 0 0 1-64 0v-64a32 32 0 0 1 32-32zm160-64a32 32 0 0 1 32 32v128a32 32 0 0 1-64 0V416a32 32 0 0 1 32-32zm160-64a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V352a32 32 0 0 1 32-32z"></path></svg> </el-icon>
      </div>

      <!-- 统一设置 -->
      <el-popover placement="left" width="300" height="600"  trigger="click">
        <el-tabs v-model="sysConfig.activeTabName">
          <el-tab-pane label="节点配置" name="node-tab" >
            <el-form ref="form1" :model="nodeConfigs" label-width="80px" size="large">
              <el-form-item label="显示名称">
                <el-switch v-model="nodeConfigs.showLabel" @change="switchNodeLabel"></el-switch>
              </el-form-item>
              <el-form-item label="文字位置">
                <el-select  v-model="nodeConfigs.textPosition" @change="changeNodeTextPos">
                  <el-option label="底部" value="Bottom_Center"></el-option>
                  <el-option label="居中" value="Middle_Center"></el-option>
                  <el-option label="顶部" value="Top_Center"></el-option>
                  <el-option label="右侧" value="Middle_Right"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="连线配置" name="link-tab">
            <el-form ref="form2" :model="linkConfigs" label-width="80px" size="large">
              <el-form-item label="连线类型">
                <el-select :teleported="false" v-model="linkConfigs.lineType" @change="switchLinkType">
                  <el-option label="直线" value="straight"></el-option>
                  <el-option label="横向折线" value="hlink"></el-option>
                  <el-option label="竖向折线" value="vlink"></el-option>
                  <el-option label="横向曲线" value="hbezier"></el-option>
                  <el-option label="竖向曲线" value="vbezier"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="显示关系">
                <el-switch v-model="linkConfigs.showLabel" @change="switchLinkLabel"></el-switch>
              </el-form-item>
              <el-form-item label="显示箭头">
                <el-switch v-model="linkConfigs.showArrow" @change="switchLinkArrow"></el-switch>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <template #reference>
            <div class="toolbar-item" >     <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M600.704 64a32 32 0 0 1 30.464 22.208l35.2 109.376c14.784 7.232 28.928 15.36 42.432 24.512l112.384-24.192a32 32 0 0 1 34.432 15.36L944.32 364.8a32 32 0 0 1-4.032 37.504l-77.12 85.12a357.12 357.12 0 0 1 0 49.024l77.12 85.248a32 32 0 0 1 4.032 37.504l-88.704 153.6a32 32 0 0 1-34.432 15.296L708.8 803.904c-13.44 9.088-27.648 17.28-42.368 24.512l-35.264 109.376A32 32 0 0 1 600.704 960H423.296a32 32 0 0 1-30.464-22.208L357.696 828.48a351.616 351.616 0 0 1-42.56-24.64l-112.32 24.256a32 32 0 0 1-34.432-15.36L79.68 659.2a32 32 0 0 1 4.032-37.504l77.12-85.248a357.12 357.12 0 0 1 0-48.896l-77.12-85.248A32 32 0 0 1 79.68 364.8l88.704-153.6a32 32 0 0 1 34.432-15.296l112.32 24.256c13.568-9.152 27.776-17.408 42.56-24.64l35.2-109.312A32 32 0 0 1 423.232 64H600.64zm-23.424 64H446.72l-36.352 113.088-24.512 11.968a294.113 294.113 0 0 0-34.816 20.096l-22.656 15.36-116.224-25.088-65.28 113.152 79.68 88.192-1.92 27.136a293.12 293.12 0 0 0 0 40.192l1.92 27.136-79.808 88.192 65.344 113.152 116.224-25.024 22.656 15.296a294.113 294.113 0 0 0 34.816 20.096l24.512 11.968L446.72 896h130.688l36.48-113.152 24.448-11.904a288.282 288.282 0 0 0 34.752-20.096l22.592-15.296 116.288 25.024 65.28-113.152-79.744-88.192 1.92-27.136a293.12 293.12 0 0 0 0-40.256l-1.92-27.136 79.808-88.128-65.344-113.152-116.288 24.96-22.592-15.232a287.616 287.616 0 0 0-34.752-20.096l-24.448-11.904L577.344 128zM512 320a192 192 0 1 1 0 384 192 192 0 0 1 0-384zm0 64a128 128 0 1 0 0 256 128 128 0 0 0 0-256z"></path></svg>  </el-icon>  </div>
        </template>
      </el-popover>

      <!-- 布局设置 -->
      <el-popover placement="left" width="250"   trigger="click">
        <el-select :teleported="false" v-model="currentLayout.type" @change="changeLayout" size="small" placeholder="请选择布局类型" style="width:250px;">
          <el-option
            v-for="item in layoutTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float: left"><i :class="item.icon"></i> {{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 12px">{{ item.value }}</span>
          </el-option>
        </el-select>
        <el-button type="primary" @click="runLayout" size="small" :icon="currentLayout.icon" style="width:100%;margin-top:5px;">{{currentLayout.text}}</el-button>
        <el-button @click="configLayout" icon="el-icon-setting" size="small" style="width:100%;margin:5px 0 0 0;">参数设置</el-button>
        <el-card class="box-card" v-show="layoutParams.show" style="height:300px">
          <div >
            <el-form label-position="right" size="small" label-width="70px" style="width:100%;margin:5px 0 0 0;">
              <el-form-item v-for="param in layoutParams.config" :key="param.name" :label="param.label">
                <el-input-number v-if="param.type == 'number'" v-model="param.value" controls-position="right" style="width:100px;"></el-input-number>
                <el-input-number v-if="param.type == 'decimal'" v-model="param.value" :step="0.1" :min="0" :max="1" controls-position="right" style="width:100px;"></el-input-number>
                <el-select   v-if="param.type == 'array'" v-model="param.value" size="small" placeholder="请选择" style="width:100px;"
                           :teleported="false"    >
                  <el-option
                    v-for="item in param.types"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <template #reference>
            <div class="toolbar-item" slot="reference" title="布局">    <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-48-247.616L668.608 512 464 375.616v272.768zm10.624-342.656 249.472 166.336a48 48 0 0 1 0 79.872L474.624 718.272A48 48 0 0 1 400 678.336V345.6a48 48 0 0 1 74.624-39.936z"></path></svg>  </el-icon>  </div>
        </template>
      </el-popover>
     
      <!-- 路径分析 -->
      <el-popover placement="left" trigger="manual" :width="350" :visible="pathFinder.show" @show="pathRecordClear">
        <div style="width:300px;">
          <el-select v-model="pathFinder.source" size="small" placeholder="请选择起始实体" style="margin-bottom:5px;width:295px;">
            <el-option
              v-for="item in pathFinder.selectNodes"
              :key="item.id"
              :label="item.textlabel"
              :value="item.id">
            </el-option>
          </el-select>
          <div style="text-align: center;"><el-button icon="el-icon-sort" size="small" circle @click="pathFinderReverse"></el-button></div>
          <el-select v-model="pathFinder.target" size="small" placeholder="请选择目标实体" style="margin-top:5px;width:295px;">
            <el-option
              v-for="item in pathFinder.selectNodes"
              :key="item.id"
              :label="item.textlabel"
              :value="item.id">
            </el-option>
          </el-select>

          <div style="margin-top:10px; text-align: center;">
            <el-button type="primary" @click="runPathFinder" icon="el-icon-finished" size="small">分析路径</el-button>
            <el-button type="warning" @click="recoveryPath" icon="el-icon-delete" size="small" plain>清除路径</el-button>
            <el-button @click="pathFinder.show = false" icon="el-icon-close" size="small" plain>关闭</el-button>
          </div>
        </div>
        <template #reference>
            <div class="toolbar-item" slot="reference" title="路径分析" @click="pathFinder.show = !pathFinder.show">      <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M640 608h-64V416h64v192zm0 160v160a32 32 0 0 1-32 32H416a32 32 0 0 1-32-32V768h64v128h128V768h64zM384 608V416h64v192h-64zm256-352h-64V128H448v128h-64V96a32 32 0 0 1 32-32h192a32 32 0 0 1 32 32v160z"></path><path fill="currentColor" d="m220.8 256-71.232 80 71.168 80H768V256H220.8zm-14.4-64H800a32 32 0 0 1 32 32v224a32 32 0 0 1-32 32H206.4a32 32 0 0 1-23.936-10.752l-99.584-112a32 32 0 0 1 0-42.496l99.584-112A32 32 0 0 1 206.4 192zm678.784 496-71.104 80H266.816V608h547.2l71.168 80zm-56.768-144H234.88a32 32 0 0 0-32 32v224a32 32 0 0 0 32 32h593.6a32 32 0 0 0 23.936-10.752l99.584-112a32 32 0 0 0 0-42.496l-99.584-112A32 32 0 0 0 828.48 544z"></path></svg>  </el-icon>   </div>
        </template>
      </el-popover>
      
      <!-- 重点对象分析 -->
      <el-popover placement="left" width="250" trigger="click">
        <el-select :teleported="false" v-model="centrality.currentType" size="small" placeholder="请选择指标类型" style="margin-bottom:5px;width:250px;">
          <el-option
            v-for="item in centrality.types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 12px">{{ item.value }}</span>
          </el-option>
        </el-select>
        <el-button type="primary" @click="computeCentrality" icon="el-icon-s-help" size="small" style="width:100%;margin-top:5px;">分析重点对象</el-button>
        <el-button @click="recoveryOldView" icon="el-icon-refresh" size="small" style="width:100%;margin:5px 0 0 0;">恢复原视图</el-button>
        <template #reference>
            <div class="toolbar-item" slot="reference" title="分析重点对象">     <el-icon>  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M320 256a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V320a64 64 0 0 0-64-64H320zm0-64h384a128 128 0 0 1 128 128v384a128 128 0 0 1-128 128H320a128 128 0 0 1-128-128V320a128 128 0 0 1 128-128z"></path><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm-320 0a32 32 0 0 1 32 32v128h-64V96a32 32 0 0 1 32-32zm160 896a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm160 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zm-320 0a32 32 0 0 1-32-32V800h64v128a32 32 0 0 1-32 32zM64 512a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0-160a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm0 320a32 32 0 0 1 32-32h128v64H96a32 32 0 0 1-32-32zm896-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0-160a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32zm0 320a32 32 0 0 1-32 32H800v-64h128a32 32 0 0 1 32 32z"></path></svg> </el-icon>   </div>
        </template>
      </el-popover>

       <!-- 群组聚类分析 -->
       <el-popover placement="left" width="250" trigger="click">
        <el-select v-model="community.currentType" size="small" placeholder="请选择聚类方式" style="margin-bottom:5px;width:250px;">
          <el-option
            v-for="item in community.types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 12px">{{ item.value }}</span>
          </el-option>
        </el-select>
        <el-select v-model="community.regionType" size="small" placeholder="请选择区域类型" style="margin-bottom:5px;width:250px;">
          <el-option
            v-for="item in community.regionTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 12px">{{ item.value }}</span>
          </el-option>
        </el-select>
        
        <el-button type="primary" @click="computeCommunity" icon="el-icon-video-play" size="small" style="width:100%;margin-top:5px;">划分群组</el-button>
        <el-button @click="recoveryCommunity" icon="el-icon-delete" size="small" style="width:100%;margin:5px 0 0 0;">清除群组</el-button>
        <template #reference>
            <div class="toolbar-item" slot="reference" title="划分群组">  <el-icon>  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"></path></svg> </el-icon>  </div>
        </template>
      </el-popover>

      <!-- 共同关系人分析 -->
      <el-popover placement="left" trigger="manual" :width="350" :visible="unionRelate.show">

            <div style="min-height:240px;width:320px;">
              <el-table
                :data="unionRelate.allSelectedNodes"
                size="small"
                empty-text="请先在画布中选择节点(限5个)"
                border
                style="width: 100%">
                <el-table-column
                  property="label"
                  label="已选实体对象">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="50">
                  <template #default="scope">
                    <el-button @click="removeSelectNodeRow(scope.row)" type="warning"   size="small"   >删</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div style="margin-top:5px; text-align: center;">
              <el-button type="primary" @click="computeUnionRealte" icon="el-icon-connection" size="small">分析共同关联</el-button>
              <el-button  type="warning" @click="showAllEles" icon="el-icon-refresh" size="small" plain>恢复视图</el-button>
              <el-button type="default" @click="unionRelate.show = false" icon="el-icon-close" size="small" plain>关闭</el-button>
            </div>
       
        <template #reference>
            <div class="toolbar-item"   title="共同关联分析" @click="unionRelate.show = !unionRelate.show">   <el-icon> <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M640 384v64H448a128 128 0 0 0-128 128v128a128 128 0 0 0 128 128h320a128 128 0 0 0 128-128V576a128 128 0 0 0-64-110.848V394.88c74.56 26.368 128 97.472 128 181.056v128a192 192 0 0 1-192 192H448a192 192 0 0 1-192-192V576a192 192 0 0 1 192-192h192z"></path><path fill="currentColor" d="M384 640v-64h192a128 128 0 0 0 128-128V320a128 128 0 0 0-128-128H256a128 128 0 0 0-128 128v128a128 128 0 0 0 64 110.848v70.272A192.064 192.064 0 0 1 64 448V320a192 192 0 0 1 192-192h320a192 192 0 0 1 192 192v128a192 192 0 0 1-192 192H384z"></path></svg>  </el-icon>   </div>
        </template>
      </el-popover>

    </div>

    <!--窗口快照-->
    <el-dialog title="窗口快照" :visible.sync="snapShot.dialogVisible" width="800px" height="400px">
      <img :src="snapShot.image" style="width:100%;" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="snapShot.dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!--节点信息展示层 -->
    <el-drawer title="实体信息" v-model="nodePanelshow" direction="rtl" :modal=false :size=400 style="top:40px;">
      <el-table :data="nodePanel.properData" border size="small" style="width: 100%">
        <el-table-column fixed prop="label" label="属性" width="140"></el-table-column>
        <el-table-column prop="value" label="属性值"></el-table-column>
      </el-table>
    <template #footer>
        <div style="flex: 1 1 auto;padding-bottom:40px">
        <el-button @click="nodePanelCancelClick">Close</el-button>
        </div>
    </template>
    </el-drawer>

    <!--关系信息展示层 -->
    <el-drawer title="关系信息" v-model="linkPanelshow" direction="rtl" :modal=false :size=400 style="top:40px;">
      <el-table :data="linkPanel.properData" border size="small" style="width: 100%">
        <el-table-column fixed prop="label" label="属性" width="140"></el-table-column>
        <el-table-column prop="value" label="属性值"></el-table-column>
      </el-table>
    <template #footer>
        <div style="flex: 1 1 auto;padding-bottom:40px">
        <el-button @click="linkPanelCancelClick">Close</el-button>
        </div>
    </template>
    </el-drawer>

    <!--节点信息展示层 -->
    <el-drawer title="统计面板" @open="staticGraphInfo" v-model="staticPanelshow" direction="ltr" :modal=false :size=400 :withHeader=false style="top:40px;">
        <template #default>
            <el-tabs v-model="staticPanel.activetab" :stretch=true>
            <el-tab-pane label="数据列表" name="data-tab">
              <el-table :data="staticPanel.tableData" size="small" style="width: 100%">
                <el-table-column type="expand">
                  <template #default="props">
                    <el-table :data="props.row.outLinks" size="small" style="width: 100%">
                      <el-table-column label="目标实体" prop="target.properties.label"></el-table-column>
                      <el-table-column label="关系名称" prop="label"></el-table-column>
                      <!-- <el-table-column label="关系类型" prop="type" width="100px"></el-table-column> -->
                    </el-table>
                  </template>
                </el-table-column>
                <el-table-column label="实体名称" prop="properties.label"></el-table-column>
                <el-table-column label="类型" prop="type" width="100px"></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="图谱筛选" name="filter-tab">
              <el-tree
                :data="filterNodeTypes"
                ref="nodeTypTree"
                show-checkbox
                default-expand-all
                node-key="id"
                :default-checked-keys="filterSelector.nodeTypes"
                :props="filterTreeProps"
                @check-change="filterNodeByType">
              </el-tree>
              <el-tree
                :data="filterLinkTypes"
                ref="linkTypTree"
                show-checkbox
                default-expand-all
                node-key="id"
                :default-checked-keys="filterSelector.linkTypes"
                :props="filterTreeProps"
                @check-change="filterLinkByType">
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="图谱统计" name="static-tab">
              <el-row :gutter="20">
                <el-col :span="12">
                  <div>
                    <el-statistic group-separator="," :value="staticPanel.nodeCount" title="实体数">
                      <template slot="prefix">
                        <i class="el-icon-aim" style="color: red"></i>
                      </template>
                    </el-statistic>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div>
                    <el-statistic group-separator="," :value="staticPanel.linkCount" title="关系数">
                      <template slot="prefix">
                        <i class="el-icon-sort" style="color: green"></i>
                      </template>
                    </el-statistic>
                  </div>
                </el-col>
              </el-row>
              <div style="height:20px;display: block;"></div>
              <el-collapse>
                <el-collapse-item name="1">
                  <template #title>
                    <i class="header-icon el-icon-aim"></i>实体统计 <el-tag size="small" type="success">{{ staticPanel.nodeCount }}</el-tag>
                  </template>
                  <el-table :data="staticPanel.nodeTypes"  size="small" style="width: 100%">
                    <el-table-column fixed prop="type" label="实体类型"></el-table-column>
                    <el-table-column prop="value" label="数量"></el-table-column>
                  </el-table>
                </el-collapse-item>
                <el-collapse-item name="2">
                  <template #title>
                    <i class="header-icon el-icon-sort"></i>关系统计 <el-tag size="small" type="success">{{ staticPanel.linkCount }}</el-tag>
                  </template>
                  <el-table :data="staticPanel.linkTypes"  size="small" style="width: 100%">
                    <el-table-column fixed prop="type" label="关系类型"></el-table-column>
                    <el-table-column prop="value" label="数量"></el-table-column>
                  </el-table>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
          </el-tabs>
      </template>
        <template #footer>
            <div style="flex: 1 1 auto;padding-bottom:40px">
            <el-button @click="staticPanelCancelClick">Close</el-button>
            </div>
        </template>
    </el-drawer>

    <!-- 关系设置 -->
    <el-dialog title="关系设置" :visible.sync="relationSetDialog">
      <el-form :model="currentLink" size="small">
        <el-form-item label="关系ID">
          <el-input v-model="currentLink.id" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="关系类型">
          <el-input v-model="currentLink.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关系名称">
          <el-input v-model="currentLink.label" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="relationSetDialog = false">取 消</el-button>
        <el-button type="primary" @click="relationSetDialog = false">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 保存记录 -->
    <el-dialog title="分析结果归档" :visible.sync="history.saveDialog" width='500px'>
      <el-form :model="history" size="small">
        <el-form-item label="归档记录名称">
          <el-input v-model="history.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div><img :src="history.image" style="width:100%;" /></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="history.saveDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="saveHistoryRecord" size="small">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 归档记录列表 -->
    <el-drawer title="归档记录" :visible.sync="history.listDialog" direction="ltr" :modal=false :size=400 style="top:40px;">
      <el-empty v-if="history.caches.length==0" description="暂无归档记录"></el-empty>
      <el-card v-for="record in history.caches" :key="record.id" class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 13px;width:200px;">{{ record.name }}</span>
          <el-button-group style="float:right;margin:-3px 0 0 0;" >
            <el-button icon="el-icon-view" size="small" @click="showHistoryRecord(record.id)" title="查看"></el-button>
            <el-button icon="el-icon-delete" size="small" @click="removeHistoryRecord(record.id)" title="删除"></el-button>
          </el-button-group>
        </div>
        <div style="height:120px;">
          <img :src="record.image" style="width:100%;"/>
        </div>
      </el-card>
    </el-drawer>

  </div>


                `,

            data() {
                return {
                    //----------------
                    SourceDataFrom: self.SourceDataFrom,
                    show_toolbar_top: self.GraphVis_ToolBarShowConfig.toolbar_top,
                    show_toolbar_search: self.GraphVis_ToolBarShowConfig.toolbar_search,
                    show_toolbar_right: self.GraphVis_ToolBarShowConfig.toolbar_right,
                    show_toolbar_bottom: self.GraphVis_ToolBarShowConfig.toolbar_bottom,
                    show_toolbar_bottom_left: self.GraphVis_ToolBarShowConfig.toolbar_bottom_left,
                    show_toolbar_bottom_right: self.GraphVis_ToolBarShowConfig.toolbar_bottom_right,
                    GraphVis_LicenseKey: self.GraphVis_LicenseKey,
                    GraphVis_Panel_ID: self.GraphVis_Panel_ID,//画板ID
                    GraphVis_GlobalConfig: self.GraphVis_GlobalConfig,//全局样式配置
                    GraphVis_needWatermark: self.GraphVis_needWatermark,//下载图片文字水印设置
                    GraphVis_textWatermark: self.GraphVis_textWatermark,//下载图片文字水印设置
                    GraphVis_backgroundColor: self.GraphVis_backgroundColor,//背景色
                    graphvis_nodes: self.graphvis_nodes,
                    graphvis_links: self.graphvis_links,
                    graphvis_layout: self.graphvis_layout,
                    graphvis_layoutConfig: self.graphvis_layoutConfig,//布局配置参数
                    graphvis_node_right_click: self.graphvis_node_right_click,
                    graphvis_link_right_click: self.graphvis_link_right_click,
                    this_plug: self,
                    //---------------
                    // 实例对象
                    graphVis: null,
                    chart: null,
                    graphvis_data: null,
                    containerDom: null,//包裹元素
                    imageCache: {  //节点图片引入定义
                        people: img_url_people,
                        company: img_url_company
                    },
                    currentNode: {}, // 选中的节点对象
                    currentLink: {},// 选中的连线对象
                    snapShot: {
                        dialogVisible: false,
                        image: ''  //快照路径
                    },
                    nodePanel: { //节点面板
                        show: false,
                        properData: []
                    },
                    linkPanel: { //连线面板
                        show: false,
                        properData: []
                    },
                    staticPanel: { //统计面板
                        show: false,
                        activetab: 'static-tab',
                        nodeCount: 0,
                        linkCount: 0,
                        nodeTypes: [],
                        linkTypes: [],
                        tableData: []
                    },
                    currentLayout: { //当前布局信息
                        preLayout: 'tree',
                        type: 'tree',
                        icon: "el-icon-video-play",
                        text: '开始布局',
                        status: false,
                    },
                    layoutParams: { //布局参数设置
                        show: false,
                        config: getLayoutParams('tree')
                    },
                    layoutTypes: layoutTypeList,
                    searchText: '', //查询内容
                    loading: false,
                    analyzePaths: [], //分析的路径记录
                    sysConfig: { //系统设置
                        activeTabName: 'node-tab'
                    },
                    nodeConfigs: { //节点配置项
                        showLabel: true,
                        textPosition: 'Bottom_Center'
                    },
                    linkConfigs: { //连线配置项
                        lineType: 'straight',
                        showLabel: true,
                        showArrow: true
                    },
                    pathFinder: { //路径查找的数据记录
                        show: false,
                        source: '',
                        target: '',
                        selectNodes: []
                    },
                    centrality: { //路径查找的数据记录
                        currentType: 'degree',
                        types: [
                            { value: 'degree', label: '度中心性' },
                            { value: 'out-degree', label: '出度中心性' },
                            { value: 'in-degree', label: '入度中心性' },
                            { value: 'betweennes', label: '中介中心性' },
                            { value: 'closeness', label: '紧密中心性' }
                        ],
                        results: [] //分析结果
                    },
                    community: { //聚类分析
                        currentType: 'louvain',
                        regionType: 'polygon',//多边形
                        regionTypes: [
                            { value: 'polygon', label: '多边区域' },
                            { value: 'circle', label: '圆形区域' },
                            { value: 'rect', label: '矩形区域' },
                            { value: 'bubbleset', label: '汽包区域' },
                        ],
                        types: [
                            { value: 'louvain', label: 'Louvain聚类' },
                            { value: 'chineseWhisper', label: '标签传播' }
                        ],
                        results: []
                    },
                    unionRelate: { //共同分析
                        show: false,
                        allSelectedNodes: []
                    },
                    relationSetDialog: false, //关系设置框
                    history: { //保存历史
                        saveDialog: false, //弹框
                        listDialog: false, //列表记录
                        name: '归档记录-' + new Date().getTime(),
                        image: '',
                        caches: [] //缓存列表
                    },
                    filterNodeTypes: [
                        { id: 1, label: '节点类型', children: [] }
                    ],
                    filterLinkTypes: [
                        { id: 1, label: '关系类型', children: [] }
                    ],
                    filterSelector: { //过滤选中的类型
                        nodeTypes: [],
                        linkTypes: []
                    },
                    filterTreeProps: {
                        children: 'children',
                        label: 'label'
                    },
                    curMouseMode: 'normal',//当前鼠标模式
                    startSelectGroup: false, //选择分组模式
                    staticPanelshow: false, //图片统计面板显示
                    nodePanelshow: false, //节点信息面板显示
                    linkPanelshow: false //连接信息面板显示

                }
            },
            methods: {
                // 初始化图谱数据
                initGraphData() {
                    var that = this;
                    //let graphvis_data = null;
                    if (this.SourceDataFrom == "config") {
                        //let temp = JSON.parse(JSON.stringify(this.graphvis_nodes));

                        this.graphvis_data = this.graphvis_nodes;

                    } else if (this.SourceDataFrom == "database_tree") {//树形表

                    } else if (this.SourceDataFrom == "demo_tree01") {//树形示例01

                        //树形示例数据
                        this.graphvis_data = { "nodes": [{ "id": 1, "label": "1", "x": 650, "y": 80, "color": "162,247,155" }, { "id": 2, "label": "2", "x": 425, "y": 160, "color": "162,247,155" }, { "id": 3, "label": "3", "x": 1050, "y": 160, "color": "162,247,155" }, { "id": 4, "label": "4", "x": 225, "y": 240, "color": "133,130,66" }, { "id": 5, "label": "5", "x": 625, "y": 240, "color": "29,61,156" }, { "id": 6, "label": "6", "x": 950, "y": 240, "color": "162,247,155" }, { "id": 7, "label": "7", "x": 1175, "y": 240, "color": "203,180,102" }, { "id": 8, "label": "8", "x": 125, "y": 320, "color": "133,130,66" }, { "id": 9, "label": "9", "x": 325, "y": 320, "color": "32,208,34" }, { "id": 10, "label": "10", "x": 525, "y": 320, "color": "29,61,156" }, { "id": 11, "label": "11", "x": 725, "y": 320, "color": "81,212,162" }, { "id": 12, "label": "12", "x": 900, "y": 320, "color": "187,39,142" }, { "id": 13, "label": "13", "x": 1025, "y": 320, "color": "162,247,155" }, { "id": 14, "label": "14", "x": 1125, "y": 320, "color": "203,180,102" }, { "id": 15, "label": "15", "x": 1225, "y": 320, "color": "203,180,102" }, { "id": 16, "label": "16", "x": 75, "y": 400, "color": "133,130,66" }, { "id": 17, "label": "17", "x": 175, "y": 400, "color": "133,130,66" }, { "id": 18, "label": "18", "x": 275, "y": 400, "color": "32,208,34" }, { "id": 19, "label": "19", "x": 375, "y": 400, "color": "32,208,34" }, { "id": 20, "label": "20", "x": 475, "y": 400, "color": "29,61,156" }, { "id": 21, "label": "21", "x": 575, "y": 400, "color": "29,61,156" }, { "id": 22, "label": "22", "x": 675, "y": 400, "color": "81,212,162" }, { "id": 23, "label": "23", "x": 775, "y": 400, "color": "81,212,162" }, { "id": 24, "label": "24", "x": 875, "y": 400, "color": "187,39,142" }, { "id": 25, "label": "25", "x": 950, "y": 400, "color": "187,39,142" }, { "id": 26, "label": "26", "x": 1000, "y": 400, "color": "162,247,155" }, { "id": 27, "label": "27", "x": 1050, "y": 400, "color": "162,247,155" }, { "id": 28, "label": "28", "x": 1100, "y": 400, "color": "203,180,102" }, { "id": 29, "label": "29", "x": 1150, "y": 400, "color": "203,180,102" }, { "id": 30, "label": "30", "x": 1200, "y": 400, "color": "203,180,102" }, { "id": 31, "label": "31", "x": 1250, "y": 400, "color": "203,180,102" }, { "id": 32, "label": "32", "x": 50, "y": 480, "color": "133,130,66" }, { "id": 33, "label": "33", "x": 100, "y": 480, "color": "133,130,66" }, { "id": 34, "label": "34", "x": 150, "y": 480, "color": "133,130,66" }, { "id": 35, "label": "35", "x": 200, "y": 480, "color": "133,130,66" }, { "id": 36, "label": "36", "x": 250, "y": 480, "color": "32,208,34" }, { "id": 37, "label": "37", "x": 300, "y": 480, "color": "32,208,34" }, { "id": 38, "label": "38", "x": 350, "y": 480, "color": "32,208,34" }, { "id": 39, "label": "39", "x": 400, "y": 480, "color": "32,208,34" }, { "id": 40, "label": "40", "x": 450, "y": 480, "color": "29,61,156" }, { "id": 41, "label": "41", "x": 500, "y": 480, "color": "29,61,156" }, { "id": 42, "label": "42", "x": 550, "y": 480, "color": "29,61,156" }, { "id": 43, "label": "43", "x": 600, "y": 480, "color": "29,61,156" }, { "id": 44, "label": "44", "x": 650, "y": 480, "color": "81,212,162" }, { "id": 45, "label": "45", "x": 700, "y": 480, "color": "81,212,162" }, { "id": 46, "label": "46", "x": 750, "y": 480, "color": "81,212,162" }, { "id": 47, "label": "47", "x": 800, "y": 480, "color": "81,212,162" }, { "id": 48, "label": "48", "x": 850, "y": 480, "color": "187,39,142" }, { "id": 49, "label": "49", "x": 900, "y": 480, "color": "187,39,142" }, { "id": 50, "label": "50", "x": 950, "y": 480, "color": "187,39,142" }], "links": [{ "source": 1, "target": 2 }, { "source": 1, "target": 3 }, { "source": 2, "target": 4 }, { "source": 2, "target": 5 }, { "source": 3, "target": 6 }, { "source": 3, "target": 7 }, { "source": 4, "target": 8 }, { "source": 4, "target": 9 }, { "source": 5, "target": 10 }, { "source": 5, "target": 11 }, { "source": 6, "target": 12 }, { "source": 6, "target": 13 }, { "source": 7, "target": 14 }, { "source": 7, "target": 15 }, { "source": 8, "target": 16 }, { "source": 8, "target": 17 }, { "source": 9, "target": 18 }, { "source": 9, "target": 19 }, { "source": 10, "target": 20 }, { "source": 10, "target": 21 }, { "source": 11, "target": 22 }, { "source": 11, "target": 23 }, { "source": 12, "target": 24 }, { "source": 12, "target": 25 }, { "source": 13, "target": 26 }, { "source": 13, "target": 27 }, { "source": 14, "target": 28 }, { "source": 14, "target": 29 }, { "source": 15, "target": 30 }, { "source": 15, "target": 31 }, { "source": 16, "target": 32 }, { "source": 16, "target": 33 }, { "source": 17, "target": 34 }, { "source": 17, "target": 35 }, { "source": 18, "target": 36 }, { "source": 18, "target": 37 }, { "source": 19, "target": 38 }, { "source": 19, "target": 39 }, { "source": 20, "target": 40 }, { "source": 20, "target": 41 }, { "source": 21, "target": 42 }, { "source": 21, "target": 43 }, { "source": 22, "target": 44 }, { "source": 22, "target": 45 }, { "source": 23, "target": 46 }, { "source": 23, "target": 47 }, { "source": 24, "target": 48 }, { "source": 24, "target": 49 }, { "source": 25, "target": 50 }] }

                    } else if (this.SourceDataFrom == "demo_tree02") {//树形示例01
                        //this.graphvis_data = { "id": 295, "name": "智能问答", "children": [{ "children": [{ "rate": "-1", "markType": "type6", "name": "半导体光刻机", "id": 305 }, { "rate": "-1", "markType": "type6", "name": "掩膜光刻机", "id": 306 }, { "rate": "-1", "markType": "type6", "name": "激光光刻机", "id": 307 }, { "rate": "-1", "markType": "type6", "name": "紫外线光刻机", "id": 308 }, { "rate": "-1", "markType": "type6", "name": "数字光刻机", "id": 309 }, { "rate": "-1", "markType": "type6", "name": "纳米光刻机", "id": 310 }, { "rate": "-1", "markType": "type6", "name": "纳米光刻机", "id": 5310 }, , { "rate": "-1", "markType": "type6", "name": "纳米光刻机", "id": 4310 }, , { "rate": "-1", "markType": "type6", "name": "纳米光刻机", "id": 3310 }, , { "rate": "-1", "markType": "type6", "name": "纳米光刻机", "id": 2310 }, , { "rate": "-1", "markType": "type6", "name": "纳米光刻机", "id": 1310 }], "name": "光刻机", "id": 311 }, { "children": [{ "rate": "-1", "markType": "type6", "name": "控制系统", "id": 331 }, { "rate": "-1", "markType": "type6", "name": "导航系统", "id": 329 }, { "rate": "-1", "markType": "type6", "name": "通讯系统", "id": 332 }, { "rate": "-1", "markType": "type6", "name": "电源系统", "id": 333 }, { "rate": "-1", "markType": "type6", "name": "载荷系统", "id": 334 }, { "rate": "-1", "markType": "type6", "name": "安全系统", "id": 335 }], "name": "无人机", "id": 2 }] };
                    } else if (this.SourceDataFrom == "demo_tree03") {//树形示例01
                       // this.graphvis_data = { "id": "冰桶挑战", "style": { "shape": "rect", "width": 50, "height": 10 }, "children": [{ "id": "刘作虎", "children": [{ "id": "周鸿祎", "children": [{ "id": "马化腾" }, { "id": "徐小平", "children": [{ "id": "牛文文", "children": [{ "id": "姚劲波", "children": [{ "id": "蔡文胜" }, { "id": "蔡明" }, { "id": "汪小菲" }] }, { "id": "杨守彬", "children": [{ "id": "所有的创业者" }, { "id": "所有的投资人" }, { "id": "所有的创业服务机构" }] }, { "id": "蒲易" }] }, { "id": "罗振宇", "children": [{ "id": "罗辑思维25000名会员" }] }, { "id": "黄西" }] }, { "id": "黄章" }] }, { "id": "罗永浩" }, { "id": "刘江峰", "children": [{ "id": "何刚", "children": [{ "id": "谢清江" }, { "id": "王翔" }, { "id": "艾伟" }] }, { "id": "王煜磊" }] }] }, { "id": "雷军", "children": [{ "id": "刘德华", "children": [{ "id": "朗朗" }, { "id": "苏桦伟" }, { "id": "周杰伦", "children": [{ "id": "方文山", "children": [{ "id": "九把刀" }, { "id": "柯有伦" }] }, { "id": "五月天", "children": [{ "id": "谢金燕", "children": [{ "id": "赵慧仙" }, { "id": "张菲" }, { "id": "郭富城" }] }, { "id": "张震" }, { "id": "金城武" }] }] }] }, { "id": "郭台铭", "children": [{ "id": "孙正义", "children": [{ "id": "宫坂学" }] }, { "id": "谢晓亮" }, { "id": "林志玲" }] }] }, { "id": "舒德伟", "children": [{ "id": "姚明" }, { "id": "NBA中国全体员工" }] }, { "id": "叶丙成", "children": [{ "id": "翟本乔" }, { "id": "嵇晓华", "children": [{ "id": "王思聪", "children": [{ "id": "易振兴", "children": [{ "id": "徐磊" }, { "id": "佟大为", "children": [{ "id": "孟非" }, { "id": "陈坤" }, { "id": "AKB48" }] }, { "id": "吴欣鸿", "children": [{ "id": "贾乃亮" }, { "id": "李小璐" }, { "id": "angelababy" }] }] }, { "id": "林更新", "children": [{ "id": "赵又廷" }, { "id": "佟丽娅" }, { "id": "AngelaBaby" }] }, { "id": "刘军" }] }, { "id": "魏坤琳", "children": [{ "id": "迟毓凯" }, { "id": "李淼" }, { "id": "姜振宇" }] }, { "id": "刘成城", "children": [{ "id": "张颖" }, { "id": "王自如", "children": [{ "id": "刘翔" }, { "id": "吴海" }, { "id": "傅盛" }] }, { "id": "汪峰" }] }] }] }, { "id": "董子健", "children": [{ "id": "郭京飞", "children": [{ "id": "袁咏仪" }, { "id": "钱芳" }] }, { "id": "陆毅" }, { "id": "关锦鹏" }] }] };
                    }
                    if (this.SourceDataFrom == "demo_tree01"
                        || this.SourceDataFrom == "demo_tree02"
                        || this.SourceDataFrom == "demo_tree03"
                        || this.SourceDataFrom == "config") {//树形示例01
                        console.log("graphvis_data", this.graphvis_data);
                        //初始化组织图实例
                        that.graphVis.addGraph(this.graphvis_data); //添加图数据
                    } else {
                        //that.graphVis.addGraph(this.graphvis_data); //添加图数据
                    }
                    let layoutType = this.graphvis_layout ?? 'tree';
                    console.log(" this.currentLayout", this.currentLayout);
                    this.currentLayout.preLayout = layoutType;
                    this.currentLayout.type = layoutType;
                    let layoutP = getLayoutParams(layoutType);
                    console.log("layoutP", layoutP);
                    if (this.graphvis_layoutConfig) {
                        setLayoutDefaultConfig(layoutType, this.graphvis_layoutConfig);
                    }
                    layoutP = getLayoutParams(layoutType);
                    console.log("layoutP", layoutP);
                    this.runLayout(layoutType, true);

                },

                //更新图数据--单个节点样式
                updateGraphData_nodestyle(graphvis_node_sigle_config) {
                    var that = this;
                    console.log("graphvis_node_sigle_config", graphvis_node_sigle_config);
                    //应用样式
                    graphvis_node_sigle_config.forEach(function (node_cofig) {
                        try {
                            let g_node = that.graphVis.findNodeById(node_cofig.id);
                            //重新设置节点的属性
                            that.graphVis.resetNodeAttributes(g_node, node_cofig.nodestyle);
                        } catch (ex) {
                            console.log("应用样式", ex);
                        }
                    });
                },
                //更新图数据--单个连线样式
                updateGraphData_linkstyle(graphvis_link_sigle_config) {
                    var that = this;
                    console.log("graphvis_link_sigle_config", graphvis_link_sigle_config);
                    //应用样式
                    graphvis_link_sigle_config.forEach(function (link_cofig) {
                        try {
                            let g_link = that.graphVis.getEdgeById(link_cofig.id);
                            //重新设置可视化连线对象属性
                            that.graphVis.resetEdgeAttributes(g_link, link_cofig.linkstyle);
                        } catch (ex) {
                            console.log("应用样式", ex);
                        }
                    });
                },
                //更新图数据-树形图
                updateGraphData_tree(graphvis_data) {
                    var that = this;
                    //console.log("updateGraphData(graphvis_data)");
                    console.log("graphvis_data", graphvis_data);
                    that.graphVis.clearAll();
                    that.graphvis_data = graphvis_data;
                    that.graphVis.addGraph(this.graphvis_data); //添加图数据
                    this.runLayout("tree", true);

                },
                // 创建全局绘图客户端对象
                createGraph() {
                    this.containerDom = document.getElementById(this.GraphVis_Panel_ID);//('graph-panel');
                    let graphvis_config = null;
                    if (this.GraphVis_GlobalConfig) {//有设置全局样式配置

                        graphvis_config = this.GraphVis_GlobalConfig;
                    } else {
                        graphvis_config = getDefaultConfig();
                    }

                    this.graphVis = new GraphVis({
                        container: this.containerDom,
                        licenseKey: this.GraphVis_LicenseKey,
                        config: graphvis_config
                    });
                    let hasAuth = this.graphVis.checkLicense(this.GraphVis_LicenseKey);
                    console.log('是否授权=', hasAuth);
                    if (!hasAuth) return false;

                    this.graphVis.setDragHideLine(false); //拖拽时隐藏连线
                    this.graphVis.setShowDetailScale(0.1);//展示细节的比例
                    this.graphVis.setZoomRange(0.1, 5);//缩放区间

                    var that = this;
                    //注册节点点击事件
                    //注册节点的点击事件
                    this.graphVis.registEventListener('node', 'click', function (event, node) {
                        //that.graphVis.highLightParent(node);
                    });

                    this.graphVis.setBackGroundColor(this.GraphVis_backgroundColor)//('#fff');设置画布背景色


                    return true;
                },
                toolBarEvent(eventType, type) {//工具栏事件
                    if (eventType == 'zoom') {
                        this.graphVis.setZoom(type);
                    } if (eventType == 'scale') {
                        if (type == 'zoomOut') {
                            this.graphVis.scaleGraph(1.1);
                        } else {
                            this.graphVis.scaleGraph(0.9);
                        }
                    } else if (eventType == 'rotate') {
                        if (type == 'left') {
                            this.graphVis.rotateGraph(5);
                        } else {
                            this.graphVis.rotateGraph(-5);
                        }
                    } else if (eventType == 'select') {
                        if (type == 'rect') {
                            this.curMouseMode = 'rect';
                            this.graphVis.setMouseModel('select', 'rect');
                        } else if (type == 'lasso') {
                            this.curMouseMode = 'lasso';
                            this.graphVis.setMouseModel('select', 'lasso');
                        } else {
                            this.curMouseMode = 'normal';
                            this.graphVis.setMouseModel('normal');
                        }
                    }
                },
                saveHistory() { //保存历史记录
                    this.history.saveDialog = true;
                    this.history.image = this.graphVis.getSnapshotImage();
                },
                saveHistoryRecord() { //保存历史记录
                    var graphCache = localStorage.getItem("graphVisCache");
                    if (graphCache == null) {
                        graphCache = [];
                    } else {
                        graphCache = JSON.parse(graphCache);
                    }
                    graphCache.push({
                        'id': new Date().getTime(),
                        'name': this.history.name,
                        'image': this.history.image,
                        'graph': this.graphVis.serialized()
                    });
                    localStorage.setItem("graphVisCache", JSON.stringify(graphCache));
                    this.history.saveDialog = false;
                    this.$message({
                        message: '记录【' + this.history.name + '】已保存',
                        type: 'success'
                    });
                },
                getHistoryRecords() { //获取历史记录列表
                    var graphCache = localStorage.getItem("graphVisCache");
                    if (graphCache) {
                        this.history.caches = JSON.parse(graphCache);
                        this.history.listDialog = true;
                    }
                },
                showHistoryRecord(historyId) {
                    var historyRecord = this.history.caches.filter(record => record.id == historyId)[0];
                    this.graphVis.clearAll();
                    this.graphVis.addGraph(historyRecord.graph);
                    this.graphVis.zoomFit();
                },
                removeHistoryRecord(historyId) {
                    var caches = [];
                    this.history.caches.forEach(record => {
                        if (record.id != historyId) {
                            caches.push(record);
                        }
                    });
                    localStorage.setItem("graphVisCache", JSON.stringify(caches));
                    this.history.caches = caches;
                },
                configLayout() { //设置布局参数
                    var that = this;
                    that.layoutParams.show = !that.layoutParams.show; //显示或隐藏参数配置项

                    if (that.layoutParams.show) {
                        var layoutConfig = getLayoutParams(this.currentLayout.type);
                        this.layoutParams.config = layoutConfig;
                    }
                },
                changeLayout(layoutType) {//切换布局类型
                    if (this.layoutParams.show) {
                        var layoutConfig = getLayoutParams(layoutType);
                        this.layoutParams.config = layoutConfig;
                    }
                },
                runLayout(layoutType, isInit) {
                    var that = this;

                    if (this.currentLayout.status) {
                        that.graphVis.stopLayout();
                        this.endLayoutCallback();

                        return;
                    }
                    layoutType = this.currentLayout.type;
                    this.currentLayout.icon = 'el-icon-loading';//运行中
                    this.currentLayout.text = '布局中,点击停止';
                    this.currentLayout.status = true;
                    console.log("this.layoutParams", this.layoutParams);
                    //布局参数（详细请查看开发文档）
                    let layoutConfig = getLayoutDefaultConfig(layoutType);
                    console.log("layoutConfig", layoutConfig);
                    that.lowerGraphAlpha(); //降低显示，文字隐藏

                    //执行动
                    //初始化组织图实例
                    //that.graphVis.addGraph(that.graphvis_data); //添加图数据
                    //执行动画布局计算
                    that.graphVis.excuteLocalLayout(layoutType, layoutConfig, function () {
                        that.graphVis.zoomFit(); //布局结束缩放居中
                    });
                    this.endLayoutCallback();

                },
                endLayoutCallback() { //布局结束的处理
                    var that = this;
                    that.graphVis.moveCenter();
                    that.currentLayout.icon = 'el-icon-video-play';
                    that.currentLayout.text = '开始布局';
                    that.currentLayout.status = false;
                    that.currentLayout.preLayout = that.currentLayout.type;
                    that.recoveryGraphAlpha();
                },
                lowerGraphAlpha() { //降低透明度，提升性能
                    var that = this;
                    that.graphVis.nodes.forEach(n => n.alpha = 0.9);
                    that.graphVis.links.forEach(l => l.alpha = 0.9);
                },
                recoveryGraphAlpha() {//恢复透明度
                    var that = this;
                    that.graphVis.nodes.forEach(n => n.alpha = 1);
                    that.graphVis.links.forEach(l => l.alpha = 1);
                },
                selectRegion() {
                    this.startSelectGroup = true;
                    this.graphVis.setMouseModel('select', 'rect');

                    var that = this;
                    this.graphVis.registEventListener('scene', 'boxSelectEnd', function (event, client, nodes) {
                        client.setMouseModel('normal');

                        if (that.startSelectGroup) {
                            var group = client.addNodesInGroup(nodes, {
                                shape: 'rect',
                                color: '55,55,255',
                                borderColor: '50,50,210',
                                borderWidth: 1,
                                alpha: 0.1
                            });
                        }
                        that.startSelectGroup = false;
                    });
                },
                clearGroup() { //清除分组
                    this.graphVis.removeAllGroup();
                },
                deleteGroup(group) { //删除分组
                    if (!group) {
                        group = this.graphVis.currentGroup;
                    }
                    this.graphVis.removeGroup(group);
                },
                groupLayout(layoutType) { //分组的子图布局
                    var that = this;

                    var group = that.graphVis.currentGroup;
                    var nodes = group.childs;
                    var connectLinks = that.graphVis.getConnectLinkOfNodes(nodes);
                    var graphData = { nodes: nodes, links: connectLinks };
                    var layoutConfig = {
                        center: [group.cx, group.cy], //布局的中心
                        splitType: 1, //网格布局的分隔类型
                        scale: 1.2,//圆形布局的节点位置占比
                        ordering: 'degree',//圆形布局排列排序方式
                        maxNodeSize: 50,//同心圆节点发现
                        levelWidth: 1,//同心圆分层依据
                        nodeSpace: 80, //树布局节点间距
                        layerSpace: 200, //树布局层间距
                        sortType: 'directed',//层级布局的排序方式
                        direction: 'UD' //层级布局的方向
                    };
                    that.graphVis.excuteWorkerLayout(graphData, layoutType, layoutConfig, false, function () {
                        that.graphVis.refreshView();
                    });
                },
                findRelation(node) { //扩展关系
                    if (!node) {
                        node = this.currentNode;
                    }
                    var that = this;
                    var relationData = searchData(node); //从服务端查询数据后，设置动态添加
                    //this.graphVis.activeAddData(node,relationData,'fastForce');//arf
                    this.lowerGraphAlpha(); //降低其他节点显示，提升性能

                    var layoutConfig = {
                        nodeRadius: 25,  //图中可视化化配置的节点大小
                        minCircleRadius: 150, //最小扩展半径
                        graphMargin: 0, //扩展图直接的间隔距离
                        animate: true, //是否开启动画

                        'friction': 0.8,  //排斥力
                        'linkDistance': 100, // 连线长度
                        'linkStrength': 0.1, //连线强度
                        'charge': -300,  //吸引力
                        'gravity': 0.01, // 中心引力
                        'scale': 2 //圆形的布局缩放比例
                    };

                    this.graphVis.activeAddData(
                        node,
                        relationData,
                        'tree',
                        layoutConfig,
                        function (newNodes, newLinks) {
                            //console.log('新增节点',newNodes);
                            //console.log('新增关系',newLinks);
                            that.recoveryGraphAlpha(); //恢复视图
                        }
                    );
                },
                mergeChildNodes(node) { //合并子节点
                    var childNodes = [];
                    (node.outLinks || []).forEach(link => {
                        if ((link.target.outLinks || []).length == 0 && link.target.inLinks.length == 1) {
                            childNodes.push(link.target);
                        }
                    });

                    (node.inLinks || []).forEach(link => {
                        if ((link.source.inLinks || []).length == 0 && link.source.outLinks.length == 1) {
                            childNodes.push(link.source);
                        }
                    });
                    if (childNodes.length > 0) {
                        childNodes.push(node);
                        var resultNode = this.graphVis.mergeNodes(childNodes, node.properties.label);
                        //resultNode.size = 40;
                        resultNode.properties.label = '';
                        resultNode.borderColor = '120,120,220';
                        resultNode.borderWidth = 2;
                    }
                },
                openChildNodes(node) {
                    this.graphVis.expandNode(node);
                },
                selectRelate(node) { //选中关联
                    if (!node) {
                        node = this.currentNode;
                    }
                    this.graphVis.selectedNeighbers(node);
                },
                findNLevelRelations(node, level) {
                    var nLevelnodes = this.graphVis.findNLevelRelations(node, level);
                    this.graphVis.addToSelectedElements(nLevelnodes);
                },
                findCycle(node) {
                    if (!node) {
                        node = this.currentNode;
                    }
                    var that = this;
                    var nodeCyclePaths = this.graphVis.findCycles(node);
                    if (nodeCyclePaths && nodeCyclePaths.length > 0) {
                        var analyzePaths = [];
                        nodeCyclePaths.forEach((pathLinks) => {
                            pathLinks.forEach(link => {
                                link.background = '200,200,240'; //给路径设置颜色
                                analyzePaths.push(link);
                            });
                        });
                        that.analyzePaths.push(analyzePaths);
                    }
                },
                showNodeDeteail(node) {
                    if (!node) {
                        node = this.currentNode;
                    }
                    this.nodePanelshow = true;
                    this.nodePanel.properData = [
                        { label: 'ID', value: node.id },
                        { label: '名称', value: node.properties.label },
                        { label: '类型', value: node.type },
                        //{ label: '性质', value: node.properties.econKind || '--' },
                        //{ label: '状态', value: node.properties.status || '--' },
                        //{ label: '注册资金', value: node.properties.registCapi || '--' },
                        { label: '关系数', value: (node.inLinks || []).length + (node.outLinks || []).length }
                    ];
                    //动态属性
                    for (let key of Object.keys(node.properties)) {
                        let kevalue = node.properties[key];
                        this.nodePanel.properData.push({ label: key, value: kevalue });
                    }
                },
                deleteNode(node) {
                    if (!node) {
                        node = this.currentNode;
                    }
                    this.graphVis.deleteNode(node);
                },
                addNodeConnect() {
                    var that = this;
                    this.graphVis.beginAddLine(function (link) {
                        link.label = '新建关系';
                        //link.parallelType = 'line';//curve|line //多连线类型
                        that.$message({ type: 'success', message: link.source.label + '【连线至】' + link.target.label });
                    });
                },
                showLinkDetail(link) {
                    this.linkPanelshow = true;
                    if (!link) {
                        link = this.currentLink;
                    }
                    this.linkPanel.properData = [
                        { label: 'ID', value: link.id },
                        { label: '关系名称', value: link.label },
                        { label: '起始节点', value: link.source.properties.label },
                        { label: '目标节点', value: link.target.properties.label }
                    ];
                },
                deleteLink(link) {
                    if (!link) {
                        link = this.currentLink;
                    }
                    this.graphVis.deleteLink(link);
                },
                hideMenu() {
                    document.getElementById('nodeRightMenuPanel').style.display = 'none';
                    document.getElementById('linkRightMenuPanel').style.display = 'none';
                    document.getElementById('sceneRightMenuPanel').style.display = 'none';
                    document.getElementById('groupRightMenuPanel').style.display = 'none';
                },
                registElementEvent() { //注册元素的交互事件
                    var that = this;

                    //节点的单击事件
                    that.graphVis.registEventListener('node', 'click', function (event, node) {
                        that.currentNode = node;
                        node.textlabel = node.properties.label;//设置显示名称
                        if (that.pathFinder.show) {
                            if (that.pathFinder.selectNodes.indexOf(node) == -1) {
                                that.pathFinder.selectNodes.push(node);
                            }
                            that.pathFinder.source = that.pathFinder.selectNodes[0].id;
                            if (that.pathFinder.selectNodes.length > 1) {
                                that.pathFinder.target = that.pathFinder.selectNodes[that.pathFinder.selectNodes.length - 1].id;
                            }
                        }

                        if (that.unionRelate.show) { //共同关联分析打开时
                            if (that.unionRelate.allSelectedNodes.indexOf(node) == -1 && that.unionRelate.allSelectedNodes.length < 5) {
                                that.unionRelate.allSelectedNodes.push(node);
                            }
                        }
                    });

                    //节点的双击事件
                    that.graphVis.registEventListener('node', 'dblClick', function (event, node) {
                        that.currentNode = node;
                        that.findRelation(node);
                    });

                    //节点鼠标移入事件
                    that.graphVis.registEventListener('node', 'mouseOver', function (event, node) {

                        that.containerDom.style.cursor = 'pointer'; //手型鼠标样式

                        node.headTipColor = node.fillColor;
                        node.headTipText = node.properties.label;
                    });

                    //节点鼠标移出事件
                    that.graphVis.registEventListener('node', 'mouseOut', function (event, node) {

                        that.containerDom.style.cursor = ''; //恢复默认鼠标样式
                        node.headTipText = null;
                    });

                    //连线的单击事件
                    that.graphVis.registEventListener('link', 'click', function (event, link) {
                        that.currentLink = link;
                        that.graphVis.addToSelectedElements([link.source, link.target]);
                    });

                    //连线的双击事件
                    that.graphVis.registEventListener('link', 'dblClick', function (event, link) {
                        that.currentLink = link;
                        that.relationSetDialog = true;
                    });

                    //连线的鼠标滑入事件
                    that.graphVis.registEventListener('link', 'mouseOver', function (event, link) {
                        link.source.showSelected = true;
                        link.target.showSelected = true;
                    });

                    //连线的鼠标滑出事件
                    that.graphVis.registEventListener('link', 'mouseOut', function (event, link) {
                        link.source.showSelected = false;
                        link.target.showSelected = false;
                    });

                    //场景的键盘事件
                    that.graphVis.registEventListener('scene', 'keyUp', function (event) {
                        //console.log(event);
                        if (event.keyCode == 46) { //key = 'Delete'
                            that.$confirm('您确定要删除所有选中的实体节点吗?', '提示', {
                                confirmButtonText: '确定删除',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                var selectedNodes = that.graphVis.getSelectedNodes();
                                if (selectedNodes.length > 0) {
                                    that.graphVis.deleteNodes(selectedNodes);//删除已选中的节点
                                    that.$message({ type: 'success', message: `已删除【${selectedNodes.length}】个节点` });
                                }
                            }).catch(() => {
                            });
                        }
                    });
                },
                regiestRightMenu() { //右键菜单注册
                    var that = this;

                    this.graphVis.registRightMenu('node', { //节点右键菜单
                        show: function (event, client, node) {
                            node.color = 'rgb(' + node.fillColor + ')';
                            that.currentNode = node;

                            that.showRightMenu(event, 'node', node);
                        },
                        hide: function () {
                        }
                    });

                    this.graphVis.registRightMenu('link', { //节点右键菜单
                        show: function (event, client, link) {
                            that.currentLink = link;
                            that.showRightMenu(event, 'link', link);
                        },
                        hide: function () {
                        }
                    });

                    //注册场景画布的右键菜单
                    this.graphVis.registRightMenu('scene', {
                        show: function (event, graphvis) {
                            that.showRightMenu(event, 'scene');
                        },
                        hide: function () {
                        }
                    });

                    //注册分组的右键菜单
                    this.graphVis.registRightMenu('group', {
                        show: function (event, graphvis, group) {
                            that.showRightMenu(event, 'group', group);
                        },
                        hide: function () {
                        }
                    });
                },
                querySearchNode(query, cb) { //模拟查询节点名称列表
                    var that = this;
                    if (query) {
                        that.loading = true;
                        setTimeout(() => {
                            that.loading = false;
                            var results = that.graphVis.nodes.filter(item => {
                                //return item.properties.label.indexOf(query) > -1;
                                return item.label.indexOf(query) > -1;
                            });
                            cb(results);
                        }, 200);
                    } else {
                        cb(that.graphVis.nodes);
                    }
                },
                handleSelect(item) { //输入框选择
                    this.searchText = item.label;
                    this.searchNode(item.id);
                },
                searchNode(nodeId) { //查询到节点
                    var node = this.graphVis.findNodeById(nodeId);
                    if (node) {
                        this.graphVis.restoreHightLight(); //恢复高亮
                        this.graphVis.highLightNeiberNodes(node, 0.1);//节点高亮
                        this.graphVis.addToSelectedElements([node]);
                        this.graphVis.moveNodeToCenter(node, 500);
                    }
                },
                searchData(nodeId) {
                    if (nodeId == 1) {
                        return currentTreeData.children;
                    }
                    var childNodes = this.graphVis_xminder.idMapChildNode[nodeId];

                    return childNodes || [];
                },
                changeNodeTextPos(textPosition) {
                    this.graphVis.nodes.forEach(node => { node.textPosition = textPosition; });
                    this.graphVis.refreshView();
                },
                switchNodeLabel(status) {
                    this.graphVis.nodes.forEach(node => { node.showlabel = status; });
                    this.graphVis.refreshView();
                },
                switchLinkType(lineType) {
                    this.graphVis.links.forEach(link => { link.lineType = lineType; });
                    this.graphVis.refreshView();
                },
                switchLinkLabel(status) {
                    this.graphVis.links.forEach(link => { link.showlabel = status; });
                    this.graphVis.refreshView();
                },
                switchLinkArrow(status) {
                    this.graphVis.links.forEach(link => { link.showArrow = status; });
                    this.graphVis.refreshView();
                },
                staticGraphInfo() { //统计图信息
                    this.staticPanel.nodeCount = this.graphVis.nodes.length;
                    this.staticPanel.linkCount = this.graphVis.links.length;

                    var nodeTypeMap = new Map();
                    var linkTypeMap = new Map();
                    this.graphVis.nodes.forEach(node => {
                        if (nodeTypeMap.get(node.type)) {
                            nodeTypeMap.set(node.type, nodeTypeMap.get(node.type) + 1);
                        } else {
                            nodeTypeMap.set(node.type, 1);
                        }
                    });
                    this.graphVis.links.forEach(link => {
                        if (linkTypeMap.get(link.label)) {
                            linkTypeMap.set(link.label, linkTypeMap.get(link.label) + 1);
                        } else {
                            linkTypeMap.set(link.label, 1);
                        }
                    });

                    var nodeTypes = Array.from(nodeTypeMap).map(item => {
                        return {
                            id: item[0],
                            label: item[0] + '(' + item[1] + ')',
                            type: item[0],
                            value: item[1]
                        };
                    });
                    this.staticPanel.nodeTypes = nodeTypes;
                    this.filterNodeTypes = [
                        { id: 1, label: '实体类型', children: nodeTypes }
                    ];
                    if (this.filterSelector.nodeTypes.length == 0) {
                        this.filterSelector.nodeTypes = [1];
                    }

                    var linkTypes = Array.from(linkTypeMap).map(item => {
                        return {
                            id: item[0],
                            label: item[0] + '(' + item[1] + ')',
                            type: item[0],
                            value: item[1]
                        };
                    });
                    this.staticPanel.linkTypes = linkTypes;
                    this.filterLinkTypes = [
                        { id: 1, label: '关系类型', children: linkTypes }
                    ];
                    if (this.filterSelector.linkTypes.length == 0) {
                        this.filterSelector.linkTypes = [1];
                    }

                    this.staticPanel.tableData = this.graphVis.nodes;
                },
                pathRecordClear() { //路径分析-清空记录
                    this.pathFinder.selectNodes = [];
                    this.pathFinder.source = '';
                    this.pathFinder.target = '';
                },
                pathFinderReverse() {//路径分析-实体反转
                    var source = this.pathFinder.source;
                    var target = this.pathFinder.target;
                    this.pathFinder.source = target;
                    this.pathFinder.target = source;
                },
                runPathFinder() { //路径分析
                    if (!this.pathFinder.source || !this.pathFinder.target) {
                        return;
                    }
                    var sourceNode = this.graphVis.findNodeById(this.pathFinder.source);
                    var targetNode = this.graphVis.findNodeById(this.pathFinder.target);
                    var paths = this.graphVis.findAllPath(sourceNode, targetNode, true);
                    if (paths.length > 0) {
                        var analyzePaths = [];
                        paths.forEach((pathLinks) => {
                            pathLinks.forEach(link => {
                                link.background = '200,200,240'; //给路径设置颜色
                                analyzePaths.push(link);
                            });
                        });
                        this.analyzePaths.push(analyzePaths);
                        this.graphVis.refreshView();
                    } else {
                        this.$message({
                            message: '没有找到实体间连通的路径！',
                            type: 'warning'
                        });
                    }
                },
                recoveryPath() { //清除路径视图
                    this.analyzePaths.forEach(links => {
                        links.forEach(link => {
                            link.background = null;
                        });
                    });
                    this.graphVis.refreshView();
                },
                computeCentrality() {
                    var that = this;
                    var centrality = that.graphVis.centrality(); //中心性计算客户端

                    var centralityResult = null;
                    switch (that.centrality.currentType) {
                        case 'degree':
                            centralityResult = centrality.degree('both');
                            break;
                        case 'out-degree':
                            centralityResult = centrality.degree('out');
                            break;
                        case 'in-degree':
                            centralityResult = centrality.degree('in');
                            break;
                        case 'betweennes':
                            centralityResult = centrality.betweennes();
                            break;
                        case 'closeness':
                            centralityResult = centrality.closeness();
                            break;
                        default:
                            centralityResult = centrality.degree('both');
                            break;
                    }

                    var minValue = Infinity, maxValue = -Infinity;
                    for (var nodeId in centralityResult) {
                        minValue = Math.min(centralityResult[nodeId], minValue);
                        maxValue = Math.max(centralityResult[nodeId], maxValue);
                    }
                    var domain = [minValue, maxValue];//指标的最大值、最小值
                    var nodeSizeRange = [0.5, 2]; //节点大小定义
                    that.graphVis.nodes.forEach(node => {
                        node.scale = that.graphVis.numScale(nodeSizeRange, domain, centralityResult[node.id]);
                    });
                    that.graphVis.refreshView();
                },
                recoveryOldView() {
                    this.graphVis.nodes.forEach(node => {
                        node.scale = 1;
                    });
                    this.graphVis.refreshView();
                },
                computeCommunity() {
                    var that = this;
                    this.recoveryCommunity();

                    var clusterNodesMap = that.graphVis.community(that.community.currentType);
                    //给群组设置不同的颜色区分
                    clusterNodesMap.forEach((nodes, cluster) => {
                        var color = that.graphVis.randomColor();
                        var group = that.graphVis.addNodesInGroup(nodes, {
                            shape: that.community.regionType, //rect,circle,polygon,bubbleset
                            color: color,
                            borderColor: color,
                            alpha: 0.08
                        });
                        group.smoothPath = true;//性能消耗较高（数据量小时使用）
                    });
                },
                recoveryCommunity() {
                    this.graphVis.removeAllGroup();// 清除原有分组
                },
                computeUnionRealte() { //执行共同关联计算
                    this.showAllEles();
                    this.graphVis.cancelAllSelected();

                    var nodes = this.unionRelate.allSelectedNodes;
                    if (nodes.length == 0) {
                        this.$message({ message: '请先在画布中选择实体节点', type: 'warning' });
                        return;
                    }
                    var relateNodes = this.graphVis.findCommonNeighbors(nodes);//共同邻居
                    if (relateNodes.length == 0) {
                        this.$message({ message: '选中实体间没有共同关系！', type: 'warning' });
                        return;
                    }
                    this.graphVis.addToSelectedElements([...nodes, ...relateNodes]);
                    this.graphVis.onlyShowSelectedNode();//仅仅显示选中
                },
                removeSelectNodeRow(row) {//删除行数据
                    var index = this.unionRelate.allSelectedNodes.indexOf(row);
                    this.unionRelate.allSelectedNodes.splice(index, 1);
                },
                showAllEles() { //显示全部
                    this.recoveryGraphAlpha();
                    this.graphVis.showAllNode();
                    this.graphVis.showAllLink();
                },
                filterNodeByType(obj, isChecked, subChecked) { //过滤节点
                    var that = this;
                    var nodeTypes = this.$refs.nodeTypTree.getCheckedNodes();
                    var clusters = nodeTypes.map(nodeType => nodeType.id);

                    that.filterSelector.nodeTypes = clusters;

                    that.graphVis.nodes.forEach(node => {
                        if (clusters.indexOf(node.type) != -1) {
                            node.visible = true;
                        } else {
                            node.visible = false;
                        }
                    });
                    that.graphVis.refreshView();
                },
                filterLinkByType(obj, isChecked, subChecked) { //过滤关系
                    var that = this;
                    var linkTypes = this.$refs.linkTypTree.getCheckedNodes();
                    var types = linkTypes.map(linkType => linkType.id);
                    //console.log(types);
                    that.filterSelector.linkTypes = types;
                    that.graphVis.links.forEach(link => {
                        if (types.indexOf(link.label) != -1) {
                            link.visible = true;
                        } else {
                            link.visible = false;
                        }
                    });
                    that.graphVis.refreshView();
                },
                nodeOperate(type) { //节点快捷操作
                    var that = this;
                    switch (type) {
                        case 'selectAll':
                            that.graphVis.selectedAllNodes();
                            break;
                        case 'reverseSelectNodes':
                            that.graphVis.reverseSelectNodes();
                            break;
                        case 'onlyShowSelectedNode':
                            that.graphVis.onlyShowSelectedNode();
                            break;
                        case 'hideSelectedNode':
                            that.graphVis.hideSelectedNode();
                            break;
                        case 'showAllNode':
                            that.graphVis.showAllNode();
                            break;
                        case 'hideIsolatedNodes':
                            that.graphVis.hideIsolatedNodes();
                            break;
                        default:
                            break;
                    }
                },
                linkOperate(type) { //连线快捷操作
                    var that = this;
                    if (type == 'onlyShowSelectLink') {
                        that.graphVis.onlyShowSelectLink();
                    } else if (type == 'showAllLink') {
                        that.graphVis.showAllLink();
                    } else if (type == 'hideAllLink') {
                        that.graphVis.hideAllLink();
                    }
                },
                fileOperate(type) { //文件操作
                    if (type == 'saveImage') {
                        let saveimage_config = {};

                        saveimage_config["type"] = "png";
                        saveimage_config["background"] = this.GraphVis_backgroundColor ?? '#fff';
                        saveimage_config["fileName"] = this.GraphVis_textWatermark?.fileName ?? "数据可视化";
                        saveimage_config["fileName"] = saveimage_config["fileName"] + new Date().getTime();
                        saveimage_config["textWatermark"] = this.GraphVis_textWatermark ?? {};
                        this.graphVis.saveImage(saveimage_config, this.GraphVis_needWatermark);
                    } else if (type == 'saveShotImage') {
                        this.snapShot.image = this.graphVis.getSnapshotImage();
                        this.snapShot.dialogVisible = true;
                    } else if (type == 'saveFile') {
                        this.graphVis.exportJsonFile('图谱数据-' + new Date().getTime());
                    }
                },
                dataOperate(type) {
                    if (type == 'saveHistory') {
                        this.saveHistory();
                    } else if (type == 'showHistory') {
                        this.getHistoryRecords();
                    }
                },
                showRightMenu(event, type, element) { //右键菜单，适配各类元素的右键项
                    var menuItems = getElementRightMenu(type, this, element);//节点类型对应的菜单项
                    if (type == "node") {
                        //检查插件上有没有配置右键命令
                        if (this.graphvis_node_right_click && this.graphvis_node_right_click.NodeRightClickText && this.graphvis_node_right_click.NodeRightClickCommand) {
                            const command = this.graphvis_node_right_click.NodeRightClickCommand;
                            const initPrarm = {};
                            initPrarm[command.ParamProperties["node_id"]] = element.id;
                            initPrarm[command.ParamProperties["node_label"]] = element.label;
                            var menuItem = {
                                label: this.graphvis_node_right_click.NodeRightClickText,
                                icon: '',
                                divided: true,
                                onClick: () => {
                                    this.this_plug.executeCustomCommandObject(command, initPrarm);
                                }
                            };
                            menuItems.unshift(menuItem);
                        }
                    } else if (type == "link") {
                        //检查插件上有没有配置右键命令
                        if (this.graphvis_link_right_click && this.graphvis_link_right_click.LinkRightClickText && this.graphvis_link_right_click.LinkRightClickCommand) {
                            const command = this.graphvis_link_right_click.LinkRightClickCommand;
                            const initPrarm = {};
                            initPrarm[command.ParamProperties["link_id"]] = element.id;
                            initPrarm[command.ParamProperties["link_label"]] = element.label;
                            initPrarm[command.ParamProperties["link_source"]] = element.source.id;
                            initPrarm[command.ParamProperties["link_target"]] = element.target.id;
                            var menuItem = {
                                label: this.graphvis_link_right_click.LinkRightClickText,
                                icon: '',
                                divided: true,
                                onClick: () => {
                                    this.this_plug.executeCustomCommandObject(command, initPrarm);
                                }
                            };
                            menuItems.unshift(menuItem);
                        }
                    }
                    this.$contextmenu({
                        items: menuItems,
                        x: event.clientX,
                        y: event.clientY,
                        zIndex: 3,
                        minWidth: 120
                    });
                    return false;
                },

                staticPanelCancelClick() {//统计面板取消
                    this.staticPanelshow = false;
                },

                nodePanelCancelClick() {//实体信息面板取消
                    this.nodePanelshow = false;
                },

                linkPanelCancelClick() {//连线信息面板取消
                    this.linkPanelshow = false;
                }


            },
            created() {
                var that = this;
                //console.log(this.graphVis);
            },
            mounted() {
                try {
                    this.containerDom = document.getElementById(this.GraphVis_Panel_ID)//('graph-panel');
                    if (this.containerDom) {
                        let isAuth = this.createGraph();//初始化客户端
                        if (isAuth) {
                            this.regiestRightMenu(); //注册右键菜单
                            //this.registElementEvent();//注册元素的交互事件  xmind有自己的节点事件
                            this.initGraphData(); //初始化加载数据并绘图
                        }
                    } else {
                        console.log("containerDom", this.containerDom)
                        setTimeout(function () {//延时2秒执行
                            this.containerDom = document.getElementById(this.GraphVis_Panel_ID);
                            console.log("containerDom", this.containerDom)
                        }, 2000);
                    }
                } catch (error) {
                    console.error(error)
                }

            },
            destroyed() {
                if (this.graphVis) {
                    this.graphVis.destory(); //销毁组件客户端，释放内存
                }
            }
        };
        option.beforeCreate = function () {
            self.vue = this;
        };
        try {
            this.vueApp = Vue.createApp(option);
            this.vueApp.use(window.ElementPlus);
            this.vueApp.use(window['vue3-context-menu'].default);
            // window['vue3-context-menu'].default
            this.vueApp.mount(`#${this.GraphVis_Div_ID}`);
        } catch (error) {
            console.error(error)
        }

    }

    updateGraphData(graphvis_data) {
        this.vue.updateGraphData(graphvis_data);
    }
    updateGraphData_tree(graphvis_data) {
        this.vue.updateGraphData_tree(graphvis_data);
    }
    updateGraphData_nodestyle(graphvis_node_sigle_config) {
        this.vue.updateGraphData_nodestyle(graphvis_node_sigle_config);
    }
    updateGraphData_linkstyle(graphvis_link_sigle_config) {
        this.vue.updateGraphData_linkstyle(graphvis_link_sigle_config);
    }
    set_ContentWidth(width) {
        this.GraphVis_Div_Width = width;
        this.content.css("width", width);
    }
    set_ContentHeight(height) {
        this.GraphVis_Div_Height = height;
        this.content.css("height", height);
    }
    setCavasSize(param_type, param_width, param_height) {
        console.log("setCavasSize()");
        let div = document.getElementById(`${this.GraphVis_Div_ID}`);
        if (param_type == "specific") {//指定宽高
            if (!param_width.includes("px")) {
                param_width = param_width + "px";
            }
            if (!param_height.includes("px")) {
                param_height = param_height + "px";
            }
        } else if (param_type == "auto") {//自适应
            param_width = "100%";
            param_height = "100%";
        } else if (param_type == "fixContent") {//画布适用内容
            param_width = "100%";
            param_height = "100%";
            const nodes = this.vue.graphVis.nodes;
            console.log("this.vue.graphVis.nodes", this.vue.graphVis.nodes);
            if (nodes.length > 0) {
                let min_x = 0, min_y = 0;
                let max_x = 0, max_y = 500;
                for (let i = 0; i < nodes.length; i++) {
                    let item = nodes[i];
                    if (i == 0) {
                        min_x = item.px;
                        min_y = item.py;
                        max_x = item.px + 100;
                        max_y = item.py + 100;
                    } else {
                        min_x = item.px < min_x ? item.px : min_x;
                        min_y = item.py < min_y ? item.py : min_y;
                        max_x = item.px > max_x ? item.px : max_y;
                        max_y = item.py > max_y ? item.py : max_y;
                    }
                }
                param_height = max_y - min_y + 100;
                param_width = max_x - min_x + 100;
                param_height = param_height + "px";
                param_width = param_width + "px";
            }
        }
        div.style.setProperty('height', `${param_height}`, 'important');
        div.style.setProperty('width', `${param_width}`, 'important');
        this.vue.graphVis.resize();
        this.vue.graphVis.moveCenter();

    }
    getCavasSize() {
        console.log("getCavasSize()");
        let div = document.getElementById(`${this.GraphVis_Div_ID}`);
        return {
            Width: div.style.width,
            Height: div.style.height
        }
    }
}
Forguncy.Plugin.CellTypeHelper.registerCellType("PlugGraphVisTree.PlugGraphVisTreeCellType, PlugGraphVisTree", PlugGraphVisTreeCellType);